Hover and click event on mobile devices

Question

I am creating a responsive website for both desktop and mobile. I have one issue with a hover and click event that I am not sure how to solve for users on mobile devices.

Answer 1

I agree with @DZittersteyn on the fact that this is a bad design. You can better show the content by default in mobile so that the one who clicks knows what he clicked.

if(!!('ontouchstart' in window)){//check for touch device
  $('myElement').unbind('click mouseenter mouseleave'); //use off if you used on, to unbind usual listeners
  $('myElement').on('click',function(){
    //slide down code
    setTimeout(function(){
       window.location.href='asdasd.html';
       },2000);
    });
}

or you can use

if(!!('ontouchstart' in window)){//check for touch device
//behaviour and events for touch device
}
else{
//behaviour and events for pointing device like mouse
}

Answer 2

Try using jQuery to listen to the touchstart and touchend events for mobile.

EX:

$('selector').bind('touchstart', function(){
  //some action
});
$('selector').bind('touchend', function(){
  //set timeout and action
});

Hope this helps.

Answer 3

if (('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch))) {
    $(".touch")
        .bind("touchstart", function() {
            $(this)
                .addClass("active")
                .bind("touchend", function() {
                    $(this).removeClass("active");
                });
        })
        .bind("touchenter", function() {
            $(this)
                .addClass("hover")
                .bind("touchleave", function() {
                    $(this).removeClass("hover active");
                });
        });
}