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