首页 文章

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

提问于
浏览 次
13

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

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

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

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

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

2在桌面vs触摸设备上运行此JsFiddle demo以查看我在说什么 .

javascript jquery iphone ipad touch

2 回答

  • 5

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

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

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

    我也知道，这个问题的答案并不是第一个答案的补充（以及它的好评），即使在广泛使用的情况下，我的眼中并没有完全解决混合问题 .

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

    回复于
  • 3

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

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

    看看http://jsfiddle.net/juYf8/17/

    回复于

相关问题