Css Hover + Klick/Touch seltsames Verhalten auf Touch-Geräten

Question

Ich weiß, der Titel ist zu allgemein. Ich konnte keinen bestimmten Titel finden.

Hier ist die Probe 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; 
    } 
} 

Probieren Sie es aus, es ist ein sehr einfaches Menü, schweben die mittlerer Artikel Artikel mit Untermenü, ein einfaches Untermenü wird mit einfachem CSS :hover angezeigt.

Klicken Sie auf das letzte Element, es hat ein Klickereignis, es wird korrekt ausgelöst.

Jetzt öffnen Sie dies in Chrome Mobilgerät Mod mit Touch-Simulation.

Klicken/berühren Sie den Eintrag mit dem Untermenü, das Untermenü wird im übergeordneten Element geöffnet. Dies ist das erwartete Verhalten.

Klicken/tippen Sie auf das letzte Element. Das Klickereignis wird nicht ausgelöst.

Wie kann ich das nur mit CSS beheben ?

UPDATE: Soweit ich das Problem sagen kann ist, dass auf der ersten Berührung der letzte hovered Element (li mit Untermenü) unhovered wird und das Untermenü ul wird ausgeblendet und die Eltern ul ‚s Höhe schrumpft und das li Element, das war unter dem berührten Punkt bewegt sich nach oben, so ist es nicht unter dem berührten Punkt mehr und es wird nicht angeklickt/berührt !!!!

Answer 1

Ich denke, Sie haben die Ursache selbst herausgefunden. Das Klickziel scheint sich zu entfernen, bevor das Ereignis das Element erreicht.

Die einfachste Lösung, die ich sehe, ist die Verwendung von etwas zusätzlichem Javascript, um das Untermenü bei Klicks zu öffnen und zu schließen. Sie verwenden Javascript für das Ereignis #clickable sowieso, also wird ein wenig mehr nicht nachteilig sein, gerade solange Sie die :hover für Fälle behalten, in denen Javascript nicht lädt ist.

---

Original-Antwort

Touch-Geräte haben keine Hover-Zustand aufgrund der Hardware Schnittstelle. Browserhersteller wählten einen Kompromiss, um Sites zuzulassen, die sich darauf verlassen. Immer wenn ein Hover-Ereignis/-Stil für ein Element definiert wird, löst die erste Berührung dieses Elements den entsprechenden Effekt statt des Klicks aus. Ein zweiter Tipp sollte zumindest in den meisten Fällen das ursprüngliche Klickereignis auslösen.

Für Ihren speziellen Fall, dass Sie nicht über eine ul im li#clickable, aber die :hover immer noch detektiert wird und der Browser verhält sich wie es konzipiert wurde. Wenn Sie Ihre #clickable aus dem Hover ausschließen, wird das Ereignis theoretisch behoben (ich kann es diesmal nicht selbst unter testen).

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