Question

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

由于jQuery的hover()函数内部使用mouseenter和mouseleave，因此注册hover()和click()的元素需要两次点击才能触发后者²。对于许多用例，这正是您希望发生的事情。但是，在hover()处理仅向悬停元素添加重点（工具提示，发光等）的应用程序中，将所有触摸设备一起跳过事件更有意义，进入{{1}处理程序。

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

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

¹在iPad，iPhone和一些Android手机上确认了行为。

² 在桌面vs触摸设备上运行此JsFiddle demo，看看我在说什么。

Answer 1

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

我个人使用下面的标志脚本，甚至检查鼠标输入和鼠标离开事件以进行最终触摸。我不知道这是不是一个好技巧。在我的情况下，它工作得很好。

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测试）上隐藏（双重）触发器的唯一方法。

我也知道这个问题的答案不是第一个答案的补充（及其好的评论），在我看来，即使广泛使用，也不能完全解决混合问题。

无论如何希望这会有所帮助。

Answer 2

我建议使用Modernizr检测设备的敏感度，除非html元素具有“无触摸”类，否则不会绑定悬停处理程序：

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

结帐http://jsfiddle.net/juYf8/17/

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

2 个答案: