忽略触摸设备上的jQuery悬停（mouseenter，mouseleave）

既没有鼠标也没有指针，悬停在屏幕上的元素的概念并不适用于触摸设备。由于许多网站依赖于JavaScript悬停事件导航或其他目的，一些触摸设备实现了mouseenter只需一次敲击即可触发。如果事件处理程序也绑定到click，则只会在元素的第二次敲击时引发。忽略触摸设备上的jQuery悬停（mouseenter，mouseleave）

由于jQuery的hover()函数在内部使用mouseenter和mouseleave，既hover()和click()注册元件需要两个抽头以触发后者。对于很多用例，这正是你想要发生的事情。然而，在hover()处理只会将重点（工具提示，发光等）添加到悬停元素的应用程序中，将所有事件一起跳过触摸设备可能更有意义，将处理器移至onclick处理器。

我知道如何专门收听touchstart和touchend事件，使我可以定制触摸用户体验。这对我的问题是一个有效的解决方案，但我希望可以有一个“更容易”的方法来解决这个问题。我正在想象一种类似于hover()的方法，它的签名只能以非触摸设备上附加的提供的事件处理程序的方式实现。

jQuery是否有这样的方法？任何插件？或者我在这里忽略了什么？

行为证实了iPad，iPhone和一些Android系统手机。

在台式机和触摸设备上运行此JsFiddle demo以查看我在说什么。

来源

2011-12-30 Jørn Schou-Rode

我建议使用Modernizr的检测设备的touchyness，只是悬停处理程序不绑定，除非HTML元素具有“无接触”类：

$('selector').click(...) 
$('.no-touch selector').hover(...)

退房http://jsfiddle.net/juYf8/17/

来源

2012-06-18 03:56:26 tobyodavies

+13

不知道为什么这是投票了，你不会放松悬停事件的设备上有两个选项？ – Aaron 2013-06-30 17:37:31

我我也总是想知道在支持触摸和点击/悬停事件的混合设备上会发生什么。在这种情况下，一旦触摸，将不再有任何可用的悬停或点击事件。什么时候用户有一次触摸屏幕（出于何种原因），然后可能想要使用他的鼠标或触摸板返回？这个站点对他来说是破碎的（至少如果他不决定继续触摸）。

我个人使用下面的标记脚本，并检查鼠标进入和鼠标离开事件最终触摸。我不知道这是否是一种好技术。在我的情况下，它工作得很好。

var touched = false; 

$("#someElement") 
    .mouseenter(function() { 
     if (!touched) { 
      // some hover action 
      // also secure to be in NO WAY triggered on touch device 
     }; 
    } 
    .mouseleave(function() { 
     if (!touched) { 
      // some mouse leave reset hover action 
      // also secure to be in NO WAY triggered on touch device 
     }; 
    } 
    .click(function() { 
     if (!touched) { 
      // do something 
      // no double trigger on touch device 
     }; 
    } 
    .on('touchstart', function() { 
     touched = true; 
     setTimeout(function() { 
      touched = false; 
     }, 300); 
     // do touchstart stuff (similar to click or not) 
    };

我不是专业的编码员。任何这些被邀请优化。在我的网页上，这似乎是避免触摸设备上的隐藏（双重）触发器（iPad测试）的唯一方法。

我也知道，这不是对这个问题的回答，更多的是对第一个答案（和它的好评）的补充，即使在广泛使用中，我的眼睛也不能完全解决混合问题。

无论如何希望这有助于它的方式。

来源

2016-01-09 10:05:09 Garavani

忽略触摸设备上的jQuery悬停（mouseenter，mouseleave）

回答

相关问题