jQuery 移动设备上的悬停和点击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12186892/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hover and click event on mobile devices
提问by eCamK
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.
在网站上，我有一个包含在链接中的框 (div)。在桌面上，当用户将鼠标悬停在它上面时，带有文本内容的不同颜色的框会滑下第一个框。当用户单击该框时，该链接会将他们带到指定页面。我为此使用jQuery。
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.
现在，在移动设备上，当用户点击盒子时，第二个盒子会向下滑动。但实际点击链接需要第二次点击。我为其创建的公司要求，在移动设备上，当用户点击一个框时，第二个框将向下滑动，并在 2 秒延迟后自动将它们发送到指定页面。这样，用户只需要点击一次。
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.
我不知道如何使这项工作。我想过使用 jQuery mobile，但我想不出一种方法来绕过第一次点击（移动设备将其视为悬停事件）并激活链接。
Thanks
谢谢
回答by sabithpocker
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.
我同意@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);
});
}
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
}
回答by Artem Doink
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");
});
});
}
回答by dotfury
Try using jQuery to listen to the touchstartand touchendevents for mobile.
尝试使用 jQuery 来侦听移动设备的touchstart和touchend事件。
EX:
前任：
$('selector').bind('touchstart', function(){
//some action
});
$('selector').bind('touchend', function(){
//set timeout and action
});
Hope this helps.
希望这可以帮助。
