jquery mouseenter 在 ios Safari 和其他触摸设备上触发。如何阻止它？答案

【问题标题】：jquery mouseenter triggered on ios Safari and other touch devices. How to stop it?jquery mouseenter 在 ios Safari 和其他触摸设备上触发。如何阻止它？
【发布时间】：2014-06-13 12:35:28
【问题描述】：

我的网站上有以下代码：

    /* Show arrows when card is hovered */
    $('BODY').on('mouseenter', '.card', function (event) {
        $(this).addClass('is-hovered');
    });

    $('BODY').on('mouseleave', '.card', function (event) {
        $(this).removeClass('is-hovered');
    });

这个想法是在带有鼠标的设备上，当鼠标悬停在每张卡片上时，每张卡片都会显示小箭头。在触摸设备上，这些箭头永远不会出现，因为可以刷卡。

问题是当您按下卡片时，iOS Safari 上会触发 jQuery mouseenter 事件。并非总是如此，尤其是在卡内按下图像时。不过，这在本质上似乎是相当随机的。我可以完全禁止 Safari 注册悬停吗？

【问题讨论】：

标签： javascript jquery safari responsive-design touch

【解决方案1】：

使用检测触摸设备的库，例如，modernizr 将类 no-touch 添加到 html 标记或通过使用modernizr js

if (Modernizr.touch) { //is touch }else{ //is screen }

关于js部分看这里http://www.hongkiat.com/blog/detect-touch-device-modernizr/

【讨论】：

在具有触摸和鼠标的 Windows 8 计算机上不会显示箭头吗？
它可能会将设备报告为触摸，但您可以使用 css3 媒体查询来允许悬停具有大分辨率的设备，即使它们是触摸的。
谢谢，这可能是我目前能得到的最接近的结果，如果没有人提供 100% 稳健的解决方案，我会将其标记为正确。

【解决方案2】：

您可以尝试使用jQuery Mobile 中的Virtual Mouse (vmouse) Bindings，如下所示：

    $('BODY').on('vmouseover', '.card', function (event) {
        $(this).addClass('is-hovered');
    });

    $('BODY').on('vmouseout', '.card', function (event) {
        $(this).removeClass('is-hovered');
    });

关于这些事件：

http://api.jquerymobile.com/vmouseover/

http://api.jquerymobile.com/vmouseout/

【讨论】：