移动设备上的悬停和点击事件

Question

我正在为桌面和移动设备创建一个响应式网站.我有一个悬停和点击事件的问题,我不知道如何解决移动设备上的用户.

在网站上,我有一个包含在链接中的框(div).在桌面上,当用户将鼠标悬停在桌面上时,带有文本内容的不同颜色框会在第一个框上滑下.当用户单击该框时,该链接会将其带到指定的页面.我正在使用jQuery.

现在,在移动设备上,当用户点击该框时,第二个框向下滑动.但实际上需要第二次点击链接.我正在创建此公司的公司要求,在移动设备上,当用户点击一个盒子时,第二个盒子将向下滑动,在延迟2秒后,它将自动将它们发送到指定的页面.这样,用户只需要点击一次.

我不确定如何使这项工作.我想过使用jQuery mobile,但我无法找到绕过第一次点击的方法(移动设备将其视为悬停事件)并激活链接.

谢谢

Answer 1

我同意@DZittersteyn的事实,这是一个糟糕的设计.您可以在移动设备中默认显示内容,以便点击的人知道他点击了什么.

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);
    });
}

或者你可以使用

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