Votre question n'est pas tout à fait claire, mais si vous souhaitez simplement éliminer le double clic, tout en conservant l'effet de survol pour la souris, mon conseil est de:
- Ajoutez des effets de survol sur
touchstart
et mouseenter
.
- Retirer les effets hover sur
mouseleave
, touchmove
et click
.
Contexte
Afin de simuler une souris, les navigateurs tels que Webkit mobile déclenchent les événements suivants si un utilisateur touche et relâche un doigt sur l'écran tactile (comme l'iPad) (source: Touch And Mouse sur html5rocks.com):
touchstart
touchmove
touchend
- Retard de 300 ms, où le navigateur s'assure qu'il s'agit d'un simple tap, pas d'un double tap
mouseover
mouseenter
- Remarque : Si un événement
mouseover
, mouseenter
ou mousemove
modifie le contenu de la page, les événements suivants ne sont jamais déclenchés.
mousemove
mousedown
mouseup
click
Il ne semble pas possible de dire simplement au navigateur Web de sauter les événements de la souris.
Pire encore, si un événement mouseover modifie le contenu de la page, l'événement click n'est jamais déclenché, comme expliqué dans Safari Web Content Guide - Handling Events , en particulier la figure 6.4 dans One-Finger Events . Ce qu'est exactement un «changement de contenu» dépendra du navigateur et de la version. J'ai constaté que pour iOS 7.0, un changement de couleur d'arrière-plan n'est pas (ou plus?) Un changement de contenu.
Solution expliquée
Récapituler:
- Ajoutez des effets de survol sur
touchstart
et mouseenter
.
- Retirer les effets hover sur
mouseleave
, touchmove
et click
.
Notez qu'il n'y a aucune action sur touchend
!
Cela fonctionne clairement pour les événements de souris: mouseenter
et mouseleave
(versions légèrement améliorées de mouseover
et mouseout
) sont déclenchés, et ajoutez et supprimez le survol.
Si l'utilisateur click
un lien, l'effet de survol est également supprimé. Cela garantit qu'il est supprimé si l'utilisateur appuie sur le bouton de retour dans le navigateur Web.
Cela fonctionne également pour les événements tactiles: sur touchstart
l'effet de survol est ajouté. Il n'est "" pas "supprimé le touchend
. Il est ajouté à nouveau mouseenter
, et comme cela n'entraîne aucun changement de contenu (il a déjà été ajouté), l' click
événement est également déclenché et le lien est suivi sans que l'utilisateur ait besoin de cliquer à nouveau!
Le délai de 300 ms qu'un navigateur a entre un touchstart
événement et click
est effectivement utilisé à bon escient car l'effet de survol sera affiché pendant ce court laps de temps.
Si l'utilisateur décide d'annuler le clic, un mouvement du doigt le fera comme d'habitude. Normalement, c'est un problème car aucun mouseleave
événement n'est déclenché et l'effet de survol reste en place. Heureusement, cela peut facilement être résolu en supprimant l'effet de survol touchmove
.
C'est tout!
Notez qu'il est possible de supprimer le délai de 300 ms, par exemple à l'aide de la bibliothèque FastClick , mais cela est hors de portée pour cette question.
Solutions alternatives
J'ai trouvé les problèmes suivants avec les alternatives suivantes:
- détection du navigateur: extrêmement sujet aux erreurs. Suppose qu'un appareil dispose d'une souris ou d'un écran tactile, alors qu'une combinaison des deux deviendra de plus en plus courante lorsque les écrans tactiles proliféreront.
- Détection de média CSS: la seule solution CSS que je connaisse. Toujours sujet aux erreurs, et suppose toujours qu'un périphérique a la souris ou le tactile, alors que les deux sont possibles.
- Émuler l'événement de clic dans
touchend
: Cela suivra incorrectement le lien, même si l'utilisateur voulait uniquement faire défiler ou zoomer, sans l'intention de cliquer réellement sur le lien.
- Utilisez une variable pour supprimer les événements de souris: Ceci définit une variable dans
touchend
qui est utilisée comme condition if dans les événements de souris suivants pour empêcher les changements d'état à ce moment-là. La variable est réinitialisée dans l'événement de clic. C'est une solution décente si vous ne voulez vraiment pas d'effet de survol sur les interfaces tactiles. Malheureusement, cela ne fonctionne pas si a touchend
est déclenché pour une autre raison et qu'aucun événement de clic n'est déclenché (par exemple, l'utilisateur a fait défiler ou zoomé), et tente ensuite de suivre le lien avec une souris (c'est-à-dire sur un appareil avec à la fois une souris et une interface tactile ).
Lectures complémentaires
Voir également Problème de double-clic sur iPad / iPhone et Désactiver les effets de survol sur les navigateurs mobiles .