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

发布于 2025-01-08 18:43:49 字数 722 浏览 4 评论 0原文

过去，检查鼠标是否存在的最佳方法是查找触摸事件支持。然而，桌面版 Chrome 现在支持触摸事件，导致此测试失败。

有没有办法直接测试鼠标悬停事件支持，而不是根据触摸事件的存在来推断它？

解决方案：以下是基于 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();
    });
});

原文

In the past, the best method to check for the presence of a mouse was to look for touch event support. However, desktop Chrome now supports touch events, making this test misfire.

Is there a way to test directly for mouseover event support, rather than inferring it based on the presence of touch events?

Resolution: Here is the code that worked, based on the answer from 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();
    });
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

怂人 2025-01-15 18:43:49

您可以执行与检测键盘的解决方案相反的操作或触摸输入。只需等待实际的触摸事件或鼠标移动事件，然后根据该事件做出决定。如果您检查事件处理程序是否存在，浏览器可能会指示它有该事件，即使它当前没有在支持该事件的硬件上运行，因此唯一可靠的做法是等待并查看哪些实际事件触发。

回复收藏 0 原文

遗失的美好 2025-01-15 18:43:49

您可能想考虑使用 Modernizr，您可以使用 Modernizer.hasEvent 执行类似以下操作()(docs) 方法：

Modernizr.hasEvent("mouseover", document);

You might want to think about using Modernizr, you could do something like the following using the Modernizer.hasEvent()(docs) method:

Modernizr.hasEvent("mouseover", document);

回复收藏 0 原文

怀里藏娇 2025-01-15 18:43:49

我已经尝试过这个并且有效。

<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 获取了函数 isEventSupported。 com/eventsupport.htm

I have try this and it's work.

<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>

I took the function isEventSupported from http://www.strictly-software.com/eventsupport.htm

回复收藏 0 原文