如何检测浏览器是否支持鼠标悬停事件？

Question

假设我有一个网页，它有一些 onmouseover javascript 行为来下拉菜单（或类似的东西）

显然，这不适用于 iPad 或智能手机等触控设备。

如何检测浏览器是否支持悬停事件，如 onmouseover 或 onmouseout 以及 CSS 中的 :hover 伪标签？

注意：我知道如果我对此感到担心，我应该以不同的方式编写它，但我很好奇是否可以进行检测。

编辑：当我说“支持悬停事件”时，我的意思是“浏览器是否对悬停事件具有有意义的表示”。 如果硬件支持而软件不支持（反之亦然），则没有有意义的表示。 除了一些即将到来的技术，我认为任何触摸设备都没有有意义的悬停事件表示。

Answer 1

此方法捕获更多设备/浏览器

try {
   document.createEvent("TouchEvent");
   alert(true);
}
catch (e) {
   alert(false);
}

阅读更多

Answer 2

var supportsTouch = (typeof Touch == "object");

只需检测它是否是触摸设备，然后执行您的特殊操作即可。 这是最简单的方法，因为大多数触摸设备模拟鼠标事件，但没有鼠标驱动设备模拟触摸事件。

更新：考虑到现在有多少设备以及Johan的评论，我建议只使用Modernizr 。

Answer 3

现在是 2016 年，许多设备都具有触摸和类似鼠标的输入已有好几年了。 “Can't touch”不是判断“Can mouseover”的好方法。 举几个例子：

• “有源笔”数字化设备，如 Galaxy Note 手机和平板电脑 (Android)、Microsoft Surface (Windows) 和 Wacom Cintiq (Mac/Windows/Android)，我相信 iPad Pro 也是如此，它的笔像鼠标一样工作并且可以“空中悬停”距离屏幕约 1 厘米时
• Windows 笔记本电脑/带触摸屏的混合动力车和普通笔记本电脑触控板等
• 可以连接到任何 PC 并与鼠标一起使用的触摸屏显示器

因此，用户可能无法悬停一分钟，然后，在同一设备上，不刷新页面，他们将笔从 Galaxy Note 中拔出，并且（假设它没有着火）他们突然在交互中使用悬停，他们希望它能够正常工作。

---

如果您需要知道您的用户 a) 是否可以使用并且 b) 当前正在使用使他们能够方便地移动鼠标的设备，您可以：

• 如果触发鼠标移动的光标正在移动，则将mousemove事件绑定到您的文档body ，该事件激活“已悬停”状态（例如，将类user-can-mouseover到body ），然后立即解除绑定，使其只发生一次。
• 同时绑定一个touchstart暂时停用该事件mousemove和touchend是重新激活它，这样，在浏览器上触发式鼠标事件（在Android和Windows很常见），正常触摸滚动不会触发mousemove 。
• 让mousemove事件解除这些touchstart和touchend事件的绑定， touchend进行良好的管理

这将导致在用户开始使用行为类似于鼠标的输入设备时触发“可以悬停”状态。

---

以混合设备为例：

1. 最初，用户正在使用触摸和滑动来浏览网页。
2. 他们到达您的应用程序，使用触摸上下滑动，同时了解它是什么。 到目前为止，“可以悬停”条件尚未激活。
3. 他们认为这是他们想要比他们的胖手指所允许的精度更高的情况之一，因此他们拔出数字化笔或伸手去拿鼠标。
4. 这会导致光标在页面上移动而没有发生无休止的触摸事件，因此您的“可以悬停”条件被触发

...并使用鼠标获取老式桌面工作站：

1. 页面加载。
2. 用户在做任何事情时移动鼠标，立即触发鼠标移动事件
3. 立即触发“可以悬停”状态

Answer 4

基于 user568458 的响应的一组功能，允许您打开/关闭触摸设备的 :hover 样式（我还没有在所有设备上尝试过）：

function detectMouseMove() {
    $(document).one('mousemove', function() { 
        $('body').addClass('hoverActive');
        detectTouchEvent();
    });
}
function detectTouchEvent() {
    $(document).one('touchstart', function() { 
        $('body').removeClass('hoverActive');
        detectMouseMove();
    });
}

然后，您可以在任何 :hover 选择器之前在样式表中使用 .hoverActive 以防止移动浏览器尝试显示悬停状态。

Answer 5

非传统浏览器的另一种方法是利用媒体查询悬停和任意悬停

matchMedia('(hover: hover)').matches; // Primary device can hover

matchMedia('(hover: none)').matches; // Primary device cannot hover

matchMedia('(any-hover: hover)').matches; // At least one of the connected devices can hover

matchMedia('(any-hover: none)').matches; // None of the connected devices can hover