CSS :hover/:focus 与（移动）触摸设备上的点击事件答案

【问题标题】：CSS :hover/:focus vs click event on (mobile) touch devicesCSS :hover/:focus 与（移动）触摸设备上的点击事件
【发布时间】：2016-12-23 14:05:19
【问题描述】：

通常我需要在悬停时显示菜单，而移动设备的菜单应在点击时打开。现在例如考虑以下示例：

.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 分配触摸/点击事件，但这似乎是多余的，因为我还没有看到任何没有粘性悬停状态的触摸设备？

所以我的问题是：

是否可以使用悬停状态破解，或者我应该使用 JavaScript 事件来使其更加防弹？

【问题讨论】：

我会去的，应该没问题。
@Roberrrt 真的，我在以前的工作中一直使用这种方法，但现在我有点怀疑了。
应该没问题。
我能想到的（唯一）令人担忧的场景是，如果相关元素不可聚焦，那么下拉菜单就不会发生在它上面。
如果您使用<a>-元素和:target，或<input type="checkbox"> 和:checked，则可以避免整个问题 - 据我所知，没有浏览器甚至考虑修改链接/表单功能。

标签： javascript android html css touch

【解决方案1】：

我想说，对于大多数悬停来说，只要您对菜单或任何关闭都没有问题，大多数悬停都可以使用 css。

我不知道有任何移动浏览器不遵守此行为，至少不是主要浏览器。如果任何主要浏览器放弃了这一点，那么移动网络的很大一部分将需要重建。

可能安全！

【讨论】：

是的，你有一个有效的观点。如果某些设备或浏览器不遵守此行为，那么很多网站都会无法正常运行。

【解决方案2】：

根据我的经验，这并不是真正的 hack，而是一种用纯 CSS 模仿悬停事件的方法。对于这类问题，我主要使用:hover/:focus，因为

1.) 他们是可靠的。

2.) 便宜（以 kb 计）。

只需要 2 条规则，并且不需要外部 HTTP 请求来包含一个完整功能菜单的规则，但是几行 JavaScript（或者，恐怖，jQuery）来创建相同的东西。

我在 cmets 中所说的，您应该或可以强制使用 tabindex 属性来强制元素可聚焦，例如：

<div class="non-focusable-clickable-hover-element" tabindex="-1">I cannot be focussed<div>

<div class="focusable-hover-element" tabindex="1">I can be focussed<div>

【讨论】：

【解决方案3】：

根据我的经验，这并不可靠。它可能有一次或另一个。但它不适用于 2020 年的当前浏览器。

更好的是使用媒体查询来获取粗略类型的指针：

@media(hover: none) and (pointer: coarse){
... CSS styling in here ...
}

Medium article on targeting touch devices

这适用于除 IE MDN details 以外的所有浏览器

【讨论】：