Css hover + clic/toucher comportement bizarre sur les appareils tactiles

Question

Je sais que le titre est trop général. Je n'ai pas trouvé de titre spécifique.

Voici l'échantillon 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; 
    } 
} 

Essayez, il est un menu très simple, placez le article moyen élément avec sous-menu, un sous-menu simple sera affiché avec CSS simple :hover.

Cliquez sur le dernier objet, il y a un événement click, il se déclenchera correctement.

Maintenant, ouvrez-le dans le mod de l'appareil mobile de Chrome avec simulation tactile.

Cliquez/touchez l'élément avec le sous-menu, le sous-menu s'ouvrira à l'intérieur de l'élément parent. C'est le comportement attendu.

Maintenant, cliquez/touchez le dernier élément. L'événement click ne se déclenchera pas.

Comment puis-je résoudre ce problème avec CSS seulement hover?

MISE À JOUR: Pour autant que je peux dire le problème est que le premier contact le dernier élément plané (li avec sous-menu) s'unhovered et le sous-menu ul se cache et la hauteur du parent ul se rétrécit et l'élément li qui était sous le point touché se déplace vers le haut, donc ce n'est plus sous le point touché et il ne soit pas cliqué/touché !!!!

Answer 1

Je pense que vous avez trouvé la cause par vous-même. La cible de clic semble s'éloigner avant que l'événement n'atteigne l'élément.

La solution la plus simple que je vois est d'utiliser une partie Javascript supplémentaire pour ouvrir et fermer le sous-menu des clics. De toute façon, vous utilisez Javascript pour l'événement #clickable donc un peu plus ne sera pas préjudiciable, du moment que vous gardez le :hover pour les cas où Javascript ne se charge pas.

---

Réponse originale

appareils tactiles ne disposent pas d'un état de vol stationnaire, en raison de l'interface matérielle . Les concepteurs de navigateurs ont choisi un compromis pour autoriser les sites sur lesquels s'appuient . Chaque fois qu'un événement/style de survol est défini pour un élément, le premier tapement déclenche cet effet au lieu du clic. Un deuxième appui devrait, au moins dans la plupart des cas, déclencher l'événement de clic d'origine.

Pour votre cas particulier vous n'avez pas ul dans le li#clickable, mais le :hover est toujours détecté et le navigateur se comporte comme il a été conçu. L'exclusion de votre #clickable de l'événement hover va théoriquement le résoudre (je ne suis pas en mesure de le tester moi-même au cette fois-ci).

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