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

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

显然，这在iPad或智能手机等触摸设备上是行不通的

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

注意：我知道如果我关心这个问题，我应该用另一种方式来写，但我很好奇是否可以进行检测

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

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

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

---

更新：考虑到现在每天有多少台设备，我建议只使用用户的评论。

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

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

---

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

• 就像Galaxy Note手机和平板电脑（Android）、微软Surface（Windows）和Wacom Cintiq（Mac/Windows/Android）一样，我也相信iPad Pro，它的笔像鼠标一样工作，在离屏幕1厘米左右时可以“悬停”
• Windows笔记本电脑/混合型电脑，带触摸屏和便捷的笔记本电脑触控板等
• 可连接到任何PC并与鼠标一起使用的触摸屏显示器

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

---

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

• 如果鼠标移动触发光标正在移动，则将

  mousemove

  事件绑定到激活“has hover”状态的文档

  body

  （例如，添加一个类

  用户可以将鼠标移动到
  body
  ）上，然后立即解除绑定，以便只发生一次

• 还绑定一个临时停用

  mousemove

  的

  touchstart

  事件和一个重新激活它的

  touchend

  ，以便在触控触发鼠标事件的浏览器上（在Android和Windows上非常常见），正常的触控滚动不会触发

  mousemove

• 让

  mousemove

  事件解除这些

  touchstart

  和

  touchsend

  事件的绑定，以实现良好的内务管理

这样，当用户开始使用类似鼠标的输入设备时，就会触发“可悬停”状态

---

例如，以混合设备为例：

最初，用户使用触摸和滑动浏览web

它们到达您的应用程序，使用touch上下滑动，同时了解它是什么。到目前为止，“可悬停”条件尚未激活

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

这会导致光标在页面上移动，而不会发生无限制的触摸事件，因此会触发“可悬停”条件

…并使用鼠标使用老式台式工作站：

页面将被加载

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

立即触发“可悬停”状态

---

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

然后，您可以在样式表中的any:hover选择器之前使用.hover active来阻止移动浏览器尝试显示悬停状态。

另一种方法是利用媒体查询和

matchMedia（'（悬停：悬停）'）。匹配；//主设备可以悬停
matchMedia（“（悬停：无）”）。匹配；//主设备无法悬停
matchMedia（“（任意悬停：悬停）”）。匹配；//至少一个连接的设备可以悬停
matchMedia（“（任何悬停：无）”）。匹配；//所有连接的设备都不能悬停

我认为你的问题需要重新表述，因为iPad在理论上确实支持onhover，但输入使其无法实现。所以你的问题应该是：我如何才能检测到用户是否有可能在某个项目上悬停？也许这可以给你一个开始：@nightcracker-从网站（和我）的角度来看，硬件是否能够支持悬停并不重要，唯一重要的是是否有一个有意义的onmouseover或onmouseout钩子。我将在问题中澄清。@amosriviera-谢谢你，这个问题中有一些有趣的东西。有一个答案让我可以选择iPad，但不能跨浏览器。这对所有/大多数触摸设备都有效吗？安卓手机和平板电脑，诺基亚触摸屏，还有iWhatevers？安卓&iThings 99.9%，Symbian？是的，从某些QtWebKit版本开始，但不要问我会是哪个版本的Symbian。你在寻找替代品吗？考虑OnMeMeMoFoE，但这将需要超时，以及在某个平台上什么也不可能被仿真。应该注意的是，支持触摸事件的设备不是必需的。

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