Question

每个人都在长时间推动功能检测。我想检测访问者的浏览器是否支持：hover伪类。我的理解是，有足够的（如果不是大多数）移动设备不支持悬停，所以我想相应地设置我的事件监听器。但是，如果没有移动检测，我不确定如何实现这一点，到目前为止我还没有通过Google或SO找到任何内容。

也许类似问题#8981463

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

直到下周我才能在移动设备上测试它。

思想？

Answer 1

没有is(':hover')，您无法使用javascript检测CSS伪类，因为它们不是DOM的一部分。

然而，您可以检测某些仅在触摸屏上可用的事件并采取相应措施，现代化工具会做这样的事情

if ('ontouchstart' in document.documentElement) {
  document.documentElement.classList.add('touch');
} else {
  document.documentElement.classList.add('no-touch');
}

它向<html>元素添加类，告诉你设备是否有触摸屏，所以你可以在CSS中做这样的事情

.no-touch .element:hover {color: red;} // for users with a mouse
.touch .element {color: blue;} // for touch devices

Answer 2

现在有一个受支持的媒体查询，用于检测是否支持悬停： 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
}

Answer 3

无法入睡，可能已经弄清楚了，至少可能是因为我的特殊情况。我在这些按钮上使用精灵，我已经在其他地方进行了精灵位置检查。我的想法是当点击按钮时，在发射之前，它也可以进行精灵位置检查。如果精灵没有为点击的按钮重新定位，那么它似乎不是一个可悬停的设备，我可以将点击视为两部分激活的第一个。我今天早些时候读过，有些移动设备已经这样做，因为它们将第一次点击视为悬停。

我的精灵定位逻辑就像这样，也许可以在按钮的点击事件之前调用：

if ($(elem).css('background-position').indexOf('76px') >= 0 ) {

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

3 个答案: