移动设备上的悬停和点击事件 [英] Hover and click event on mobile devices

问题描述

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

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.

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

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.

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

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.

我不知道如何使这项工作。我想过使用jQuery mobile，但是我无法找到绕过第一次点击的方法（移动设备将其视为悬停事件）并激活链接。

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.

谢谢

推荐答案

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

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

或者你可以使用

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

这篇关于移动设备上的悬停和点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！