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

试试吧，这是一个非常简单的菜单，悬停中间项目项目与子菜单，将显示一个简单的子菜单与简单的CSS :hover。

点击最后一项，它有一个点击事件，它会正确启动。

现在在Chrome的移动设备mod中用触摸模拟打开它。

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

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

我该如何解决这个与CSS只有hover？

更新：据我可以告诉的问题是，在第一次触摸的最后悬停的元素（li与子菜单）返回unhovered和子菜单ul被隐藏，而家长ul的高度萎缩，那是li元素在触摸点下移动，所以它不在触摸点了，它不会被点击/触摸！

Answer 1

我想你已经找到了你自己的原因。点击目标似乎在​​事件到达元素之前移开。

我看到的最简单的解决方案是使用一些补充的Javascript来打开和关闭点击子菜单。您无论如何都使用Javascript作为#clickable事件，所以稍微多一点也不会有害，只要您保留:hover以避免Javascript无法加载的情况。

---

原来的答案

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

您的特定情况下，你没有 li#clickable内ul，但仍检测:hover和浏览器 的行为，因为它的设计。从悬停 事件中排除您的#clickable将在理论上解决它（我无法在此时自己在 进行测试）。

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