javascript - CSS :hover/:focus vs click event on (mobile) touch devices

Question

我经常遇到这样的情况，我需要在悬停时显示菜单，而对于移动设备，菜单应该在点击时打开。现在例如考虑以下示例:

.btn {
  width: 200px;
  background-color: #333;
  color: white;
  padding: 10px;
}
.menu {
  display: none;
  padding: 15px;
}
.btn:hover .menu {
  display: block;
}
.btn:focus .menu {
  display: block;
}

<div class="btn">
  Button
  <div class="menu">I am menu</div>
</div>

现在这会自动在移动设备上运行，因为悬停状态在触摸设备上是粘性的。但是这个 hack 适用于所有触摸设备吗？也就是说，值得冒险吗？会有一些触摸设备没有悬停状态粘性吗？显然，另一种方法是在触摸设备上使用 JavaScript 分配触摸/点击事件，但这似乎是多余的，因为我还没有看到任何没有粘性悬停状态的触摸设备？

所以我的问题是:

可以使用悬停状态 hack 还是我应该使用 JavaScript 事件来使其更可靠？

Answer 1

我想说的是，只要您对菜单或用户单击单独元素时关闭的任何内容没问题，就可以为大多数悬停坚持使用 css。

我不知道有任何移动浏览器不遵守此行为，至少不是主要浏览器。如果任何主要浏览器放弃此功能，则需要重建大量移动网络。

可能是安全的!