移动设备上的hover和点击事件
我正在为桌面和移动设备创建一个响应式网站。 我有一个hover和点击事件的问题，我不知道如何解决移动设备上的用户。
在网站上，我有一个包含在链接中的框（div）。 在桌面上，当用户将鼠标hover在桌面上时，带有文本内容的不同颜色框会向下滑过第一个框。 当用户单击该框时，该链接会将其带到指定的页面。 我正在使用jQuery。
现在，在移动设备上，当用户点击该框时，第二个框向下滑动。 但实际关注链接需要第二次点击。 我正在创建此公司的公司要求，在移动设备上，当用户点击一个框时，第二个框将向下滑动，在2秒延迟后，它将自动将它们发送到指定页面。 这样，用户只需点击一次。
我不知道如何使这项工作。 我想过使用jQuery mobile，但我无法找到绕过第一次点击的方法（移动设备将其视为hover事件）并激活链接。
谢谢
我同意@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 }
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"); }); }); }
尝试使用jQuery来收听touchstart和touchend移动事件。
EX：
$('selector').bind('touchstart', function(){ //some action }); $('selector').bind('touchend', function(){ //set timeout and action });
希望这可以帮助。