14

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

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

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

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

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

4

5 回答 5

18

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

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

阅读更多

于 2012-01-06T13:29:11.793 回答
11 
var supportsTouch = (typeof Touch == "object");

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

更新：考虑到现在一天有多少设备和Johan的评论，我建议简单地使用Modernizr。

于 2011-01-10T03:43:39.330 回答
10

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

  • “有源笔”数字化设备，如 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. “可以悬停”状态立即触发
于 2016-09-13T16:29:42.297 回答
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
于 2020-06-11T16:24:02.300 回答
3

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

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

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

于 2017-08-02T16:13:00.790 回答