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

Question

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

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

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

注意：我知道如果我担心这个我应该写一个不同的方式，但我很好奇是否可以进行检测。

编辑：当我说“支持悬停事件”时，我的真正意思是“浏览器是否具有悬停事件的有意义表示”。如果硬件支持但软件不支持（反之亦然），则没有有意义的表示。除了一些 upcoming tech 之外，我认为没有任何触摸设备能够有意义地表示悬停事件。

Answer 1

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

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

更新：考虑到现在一天有多少台设备和Johan 的cmets，我建议直接使用Modernizr。

Answer 2

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

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

Read more

Answer 3

现在是 2016 年，很多设备都具备触控和类似鼠标的输入功能已经有好几年了。 “不能触摸”不是判断“可以鼠标悬停”的好方法。仅举几个例子：

• "Active pen" digitizer devices 喜欢 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 事件以进行良好的内务管理

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

---

以混合设备为例：

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

non-legacy browsers 的另一种方法是利用媒体查询 hover 和 any-hover

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