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;
  }
}

尝试一下，这是一个非常简单的菜单，将中间项项目悬停在子菜单上，一个简单的子菜单将显示简单的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;
}

Css悬停+点击/触摸触摸设备上的奇怪行为

1 个答案: