触摸设备上的CSS悬停+单击/触摸奇怪行为

Question

我知道标题太笼统了。我找不到具体的标题。

这里是示例https://jsfiddle.net/Exlord/1soagsL5/

HTML

<ul>
  <li>item1</li>
  <li>item1</li>
  <li>item with submenu &gt;
    <ul>
      <li>item1</li>
      <li>item1</li>
    </ul>
  </li>
  <li>item1</li>
  <li id='clickable'>item1</li>
</ul>

JavaScript

var el = document.getElementById('clickable');
el.addEventListener('click', function(e) {
  console.log(e.target);
}, false);

CSS

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 200px;
  max-width: 100%;
}

li {
  background: gray;
  padding: 5px;
  border: solid 1px black;
  position: relative;
}

li:hover > ul {
  display: block;
}

@media all and (min-width: 481px) {
  ul ul {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
  }
}

@media all and (max-width: 480px) {
  ul ul {
    display: none;
  }
}

试一试，这是一个非常简单的菜单，悬停在中间的item item with submenu，一个简单的子菜单会显示一个简单的CSS :hover。

点击最后​​一项，它有一个点击事件，它会正确触发。

现在在带有触摸模拟的 Chrome 移动设备模块中打开它。

单击/触摸带有子菜单的项目，子菜单将在父元素内打开。这是预期的行为。

现在单击/触摸最后一个元素。点击事件不会触发。

如何仅使用 CSS hover 解决此问题？

更新：据我所知，问题是第一次触摸最后一个悬停元素（li 带有子菜单）被取消悬停，子菜单ul 被隐藏并且父ul 的高度缩小并且触摸点下方的li 元素向上移动，因此它不再位于触摸点下方，也不会被点击/触摸！！！！

Answer 1

我认为你自己找到了原因。在事件到达元素之前，点击目标似乎确实移开了。

我看到的最简单的解决方案是使用一些补充 Javascript 在点击时打开和关闭子菜单。无论如何，您都将 Javascript 用于 #clickable 事件，因此只要在 Javascript 无法加载的情况下保留 :hover 就不会有害。

---

原答案

由于硬件原因，触控设备没有悬停状态 界面。浏览器制造商选择了一种折衷方案，以允许网站 依靠它。每当为元素定义悬停事件/样式时 第一次点击将触发该效果而不是点击。第二次点击 至少在大多数情况下，应该触发原始点击事件。

对于您的特定情况，您没有 ul 在 li#clickable，但仍检测到 :hover 并且浏览器 按照设计的方式运行。从悬停中排除您的#clickable 事件理论上会修复它（我无法自己测试它 这次）。

li:not(#clickable):hover > ul {
  display: block;
}