我该如何可靠地确定浏览器是否支持鼠标悬停事件？

Question

我该如何可靠地确定浏览器是否支持鼠标悬停事件？

javascriptmobilebrowserbrowser-feature-detection

8

过去，检查鼠标是否存在的最佳方法是查找触摸事件支持。然而，桌面版Chrome现在支持触摸事件，这使得这个测试失误了。

有没有一种直接测试mouseover事件支持的方法，而不是根据触摸事件的存在来推断呢？

解决方案：以下是基于AshleysBrain答案的代码，它可以正常工作。

jQuery(function()
{
    // Has mouse
    jQuery("body").one("mousemove", function(e)
    {
        attachMouseEvents();
    });

    // Has touchscreen
    jQuery("body").one("touchstart", function(e)
    {
        // Unbind the mouse detector, as this will fire on some touch devices. Touchstart should always fire first.
        jQuery("body").unbind("mousemove");

        attachTouchEvents();
    });
});

- Luke Dennis

太好了！使用playbook（RIM OS）尝试，第一次运行很好，但在刷新页面时检测到mousemove（！？）。然而，将测试附加到某个#id而不是body上完美地解决了这个问题。 - MaxD

4个回答

1

你可能想考虑使用Modernizr，你可以使用Modernizer.hasEvent()(docs)方法来实现以下操作：

Modernizr.hasEvent("mouseover", document);

- jabclab

我不想为这个特定的任务使用所有Modernizr的开销，但我能够剪切出isEventSupported函数并修改它以满足我的需求。谢谢！ - Luke Dennis

我说得太早了。在iPhone上，Modernizr.hasEvent（“mouseover”）评估为true。 - Luke Dennis

0

我尝试过这个，它可以工作。

<html>
<head>
    <script type="text/javascript">
        function isEventSupported(eventName) {
            var el = document.createElement("body"[eventName] || "div");
            var isSupported = "on" + eventName.toLowerCase() in el || top.Event && typeof top.Event == "object" && eventName.toUpperCase() in top.Event;
            el = null;
            return isSupported;
        }
    </script>
</head>

<body onload="alert(isEventSupported('mouseover'));">TEST mouseover event</body>
</html>

我从http://www.strictly-software.com/eventsupport.htm中获取了函数isEventSupported

- OammieR

这个解决方案应该是可行的，但如果你在 iPhone 上尝试这段代码，它仍然会评估为 true。我怀疑触摸事件能够在幕后触发焦点/鼠标悬停，因此 MobileSafari 看到该事件存在，即使没有鼠标。 - Luke Dennis

-1

如果网站能像精确检测您使用移动浏览器一样来检测您是否支持鼠标悬停，那么为什么您不能使用相同的技术来推断出它们不支持鼠标悬停呢？

- The Muffin Man

如果它是连接了鼠标的Android平板电脑（这是可以实现的），那该怎么办？我正在寻找一种特定于鼠标事件的具有未来性的解决方案。（我已经使用用户代理检查Chrome和移动设备，但用户代理并不总是可靠的。） - Luke Dennis

哎呀，我不知道Android平板电脑有鼠标附件选项！ - The Muffin Man

疯狂吧？虽然这是一个边缘案例，但如果您将鼠标插入带有 USB 端口的 Android 设备中，它是可以工作的。 - Luke Dennis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- AshleysBrain · Accepted Answer

你可以反过来解决检测键盘或触摸输入的问题。等待实际的触摸事件或鼠标移动事件，并基于此进行决策。如果你检查事件处理程序的存在，即使它当前没有在支持它的硬件上运行，浏览器也可能会指示它具有该事件，因此唯一可靠的方法是等待并查看哪些实际事件被触发。