javascript - 检测悬停是否存在或可用

Question

长期以来，每个人都在插入特征检测。我想检测访问者的浏览器是否支持 :hover 伪类。据我了解，即使不是大多数，也有足够多的移动设备不支持悬停，因此我想相应地调整我的事件监听器。但是如果没有移动检测，我不确定如何完成此操作，而且到目前为止我还没有通过 Google 或 SO 找到任何东西。

也许类似于问题 #8981463

$(function() {
  var canHover = $(document).is(":hover");
});

我要到下周才能在移动设备上对此进行测试。

想法？

Answer 1

现在有一个支持良好的媒体查询来检测是否支持悬停: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover

您可以将其与 Window.matchMedia 一起使用: https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

然后你会使用:

if (window.matchMedia( "(hover: none)" ).matches) {
   // hover unavailable
}