Question

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

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

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

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

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

Answer 1

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

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

Answer 2

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

只是检测它是否是触摸设备，然后做你特别的事情。这是最简单的方法，因为大多数触摸设备模拟鼠标事件，但没有鼠标驱动设备模拟触摸事件。

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

Answer 3

这是2016年，现在有很多设备同时具有触摸和类似鼠标的输入。 “无法触摸”是不判断“可以鼠标悬停”的好方法。举几个例子：

"Active pen" digitizer devices喜欢Galaxy Note手机和平板电脑（Android），微软Surface（Windows）和Wacom Cintiq（Mac / Windows / Android），我也相信iPad专业版，其中笔的工作方式就像鼠标一样可以在离屏幕大约1厘米的地方“空中悬停”
带触摸屏的Windows笔记本电脑/混合动力车以及传统的笔记本电脑触控板等
可以连接到任何PC并与鼠标一起使用的触摸屏显示器

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

如果您需要知道您的用户a）是否可以使用b）当前使用的设备可以方便地将其移除，强>你可以：

将mousemove事件绑定到您的文档body，如果鼠标移动触发游标，则会激活“悬停”状态（例如，将类user-can-mouseover添加到body）正在移动，然后立即解除绑定，所以它只发生一次。

同时绑定暂时停用touchstart的{{1}}事件和重新激活它的mousemove，以便触摸触发鼠标事件的浏览器（在Android和Windows上非常常见）），正常的触摸滚动不会触发touchend。

让mousemove事件取消绑定这些mousemove和touchstart事件，以便做好内务管理

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

例如，采用混合设备：

最初，用户正在使用触摸和滑动来浏览网页。

他们到达您的应用程序，使用触摸向上和向下滑动，同时了解它是什么。到目前为止，“可以悬停”的情况不活跃。

他们认为这是他们想要比他们的胖手指允许更准确的情况之一，所以他们拉出数字化笔或伸手去拿鼠标。

这会导致光标在页面上移动而没有发生未触发的触摸事件，因此触发了“可悬停”状态

...并带着一个带鼠标的老式桌面工作站：

页面加载。

用户在执行任何操作时移动鼠标，立即触发鼠标移动事件

立即触发“可悬停”状态

Answer 4

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

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

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

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

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

5 个答案: