touchstart and touchend to simulate hover or mouseup and mousedown

Question

I need to simulate hover or mouseup/down in iphone menu, there are two examples I have given.

<ul id="main_nav">
    <li><a href="http://google.com">google</a></li>
    <li><a href="http://yahoo.com">yahoo</a></li>
    <li><a href="#">Three</a>
      <ul>
        <li><a href="#">sub One</a></li>
        <li><a href="#">sub Two</a></li>
      </ul>
</li>
<li><a href="#">Four</a></li>
</ul>

//bind the touchstart event to the link element
$('li').live('touchstart touchend', function(e){
    $(this).toggleClass('btn-sign-up-hover');
    //alert('alert');
});

a {
    display:block;
    line-height:30px;

}

li{
    background:#096;
}

.btn-sign-up-hover {
    background: #F3F;
}

This is not working in iphone,

but following is work

//bind the touchstart event to the link element
$('li').live('touchstart', function(e){
    $(this).css('background','red');
    //alert('alert');
});

$('li').live('touchend', function(e){
    $('li').css('background','#096');
    //alert('alert');
});

Issue is I need to use toggleClass.

Fiddle example http://jsfiddle.net/UcyAb/

Answer 1

//bind the touchstart event to the link element
$('li').live('touchstart', function(e){
    $(this).addClass('btn-sign-up-hover');
    //alert('alert');
});

$('li').live('touchend', function(e){
    $('li').removeClass('btn-sign-up-hover');
    //alert('alert');
});

Hope this will work.

Answer 2

I have been using a solution similar to @Sameera Thilakasiri's answer, however I was having an issue with the iPad firing 2 click events - one for the menu item that was clicked, and one for whatever was beneath the menu (z-index wise). The solution that worked for me was to trigger a slight delay in the touchend event. Hope this helps someone!

$('.touchHover').bind('touchstart',function(){
     $(this).addClass('hovered');
     }).bind('touchend',function(){
     $t=setTimeout(function(){$(this).removeClass('hovered');},10);
});