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.

On the site, I have a box (div) that is wrapped in a link. On the desktop, when a user hovers over it, a different colored box with text content slides down over the first box. When a user clicks the box, the link takes them to specified page. I am using jQuery for this.

Right now, on a mobile device, when a user taps the box, second box slides down. But it takes a second tap to actually follow the link. The company that I am creating this for has requested that, on mobile devices, that when the user taps a box, the second box will slide down and after a 2 second delay, it will automatically send them to a specified page. This way, a user is only required to tap once.

I'm not sure how to make this work. I thought about using jQuery mobile, but I can't figure out a way to bypass the first tap (which mobile devices treat like a hover event) and activate the link instead.

Thanks

Answer 1

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 2

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
}