Javascript 检测客户端设备是否支持：悬停和：焦点状态

听起来是个简单的问题，但解决起来却很有挑战性。对于某些网站，我的内容只有在用户悬停/聚焦链接时才会显示。然而，链接本身有一个目标

如果触摸屏用户单击其中一个链接，浏览器会立即转到

href

位置。这意味着悬停内容永远不可见

这就是为什么没有鼠标（或其他像魔术遥控器一样悬停的设备）的用户应该看到其他内容的原因。但是我怎么能检测到呢

$（文档）。在（'click'，'#我的菜单内部>ul>li>a'，函数（e）{
如果（ClientHasiInputDeviceSupportingHover（））{
返回true；
}否则{
e、 预防默认值（）；
$（“#对于无悬停访客”）.html（“”）；
$（this.clone（）.appendTo（“#用于无悬停访问者”）；
$（this）.next（）.clone（）.appendTo（“#用于无悬停访问者”）；
}
});
函数ClientHasiInputDeviceSupportingHover（）{
//我怎样才能发现这个？？？
如果（$（'#checkhover:checked'）。长度>0）{
返回true；
}
返回false；
}

.clearfix:：after{
内容：“；
明确：两者皆有；
显示：表格；
}
#我的菜单>ul{
利润率：10px；
宽度：100%；
背景颜色：黄色；
列表样式类型：无；
位置：相对位置；
}
#我的菜单内部>ul>li{
浮动：左；
利润率：20px；
}
#我的菜单内部>ul>li>a{
填充：20px；
边框：1px纯黑；
显示：块；
}
#我的菜单内部>ul>li>div.sub{
位置：绝对位置；
顶部：计算（100%-20px）；
背景色：红色；
填充：40px；
显示：无；
左：0；
宽度：100vw；
}
#我的菜单内部>ul>li a:hover+div.sub，#我的菜单内部>ul>li a:focus+div.sub，
#我的菜单内部>ul>li>div.sub:悬停，#我的菜单内部>ul>li>div.sub:焦点{
显示：块；
}

模拟客户端支持的悬停：

一种方法，如果您能够使用最新的CSS（并检查链接资源中的兼容性表）：

-似乎无法理解
指针

-可能使用鼠标
-可能使用触摸
-可能既有鼠标也有触摸屏

W3C似乎已经意识到了这个问题，并引入了悬停功能：

悬停媒体功能用于查询用户悬停的能力 使用主定点设备覆盖页面上的元素。如果 设备有多个定点设备，悬停媒体功能必须 反映“主要”定点设备的特性，如下所示： 由用户代理确定。（查询任何 可用的定点设备，请参阅任意悬停媒体功能。）

甚至还有一个媒体查询来检查是否有可能悬停：

任意指针

和

任意悬停

媒体功能与 指针和悬停媒体功能，但它们对应于 用户可用的所有定点设备的功能。在 对于任何指针，如果需要，可以匹配多个值 不同的指向设备具有不同的特性

代码示例：

/* Primary input mechanism system can 
   hover over elements with ease */
@media (hover: hover) { ... }

/* Primary input mechanism cannot hover 
   at all or cannot conveniently hover 
   (e.g., many mobile devices emulate hovering
   when the user performs an inconvenient long tap), 
   or there is no primary pointing input mechanism */
@media (hover: none) { ... }

/* One or more available input mechanism(s) 
   can hover over elements with ease */
@media (any-hover: hover) { ... }


/* One or more available input mechanism(s) cannot 
   hover (or there are no pointing input mechanisms) */
@media (any-hover: none) { ... }

正式草案：

此功能仍然存在风险，但我真的希望它在得到广泛支持后能够得到充分支持：

进一步案文：

对于Chrome，请在此处测试您的设备：

使用JavaScript进行测试：

---

目前最好的解决方案很可能是通过

document.createEvent（“TouchEvent”）；使用触摸检测的回退解决方案来使用这些媒体查询和鼠标检测通过
mousemove.hasMouse
大多数设计师似乎都有相反的问题，即摆脱恼人的双击以到达元素

但是，您可以尝试以下方法来解决问题，并节省大量额外的代码或设备检测

$("*").on("touchend", function(e) { $(this).hover(); });

注释


您可以用特定的类或类型替换*
您可以向touchend添加事件，如单击或鼠标悬停
仅在iphone XR ois 12.1和ipad ios 9.5、safari和chrome上测试
您可以检查设备是否为移动设备。谷歌上有很多关于如何检查其触摸设备的例子。@ConstantinChirila这是没有用的。比如4K触摸屏呢？带触摸板的迷你上网本怎么样？以前有人问过这个问题——比如这里：不幸的是，似乎没有好的解决方案：（（我最近也有同样的问题，最后只是测试触摸支持——这并不理想，因为同时访问这两个设备的用户体验更差，但我没有看到更好的。）@RobinZigmond关于鼠标支持的问题与此类似，因为除了支持悬停/聚焦的鼠标外，只有很少的输入可能性。但我希望可能有一个脚本可以模拟悬停或类似的情况，并因此给出适当的答案？您可以检查任何类型设备上的触摸支持。可能是我的我说的是移动，所以这条评论把你甩了。但正如@Robin Zigmond所说的，同时使用这两种输入的用户体验更差。非常好的解释让我想到了一件更有希望的事情：
@media（hover:hover）
。请看我的答案。这是一个很好的发现！请注意，IE11不支持这一点。我想说谁在乎，但仅供参考。Firefox$("*").on("touchend", function(e) { $(this).hover(); });