忽略触摸设备上的jQuery悬停(mouseenter,mouseleave)

Question

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

由于jQuery的hover()函数在内部使用mouseenter和mouseleave,带有注册hover()和click()注册的元素需要两次点击才能触发后者².对于许多用例,这正是您希望发生的事情.但是,在hover()处理只是将重点(工具提示,发光等)添加到悬停元素的应用onclick程序中,将所有事件一起跳过触摸设备,将其转移到处理程序可能更有意义.

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

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

---

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

²在台式机和触摸设备上 运行此JsFiddle演示,看看我在说什么.

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/