Comment différencier les simples clics et les doubles clics sur un seul et même élément?
Si vous n'avez pas besoin de les mélanger, vous pouvez compter sur clicket dblclickchacun fera le travail très bien.
Un problème survient lorsque vous essayez de les mélanger: un dblclickévénement déclenchera également un clickévénement , vous devez donc déterminer si un simple clic est un simple clic "autonome" ou une partie d'un double clic.
De plus: vous ne devez pas utiliser les deux clicket dblclicksur un seul et même élément :
Il est déconseillé de lier les gestionnaires aux événements click et dblclick pour le même élément. La séquence des événements déclenchés varie d'un navigateur à l'autre, certains recevant deux événements de clic avant le dblclick et d'autres un seul. La sensibilité du double-clic (temps maximum entre les clics détecté comme un double-clic) peut varier selon le système d'exploitation et le navigateur, et est souvent configurable par l'utilisateur.
Source: https://api.jquery.com/dblclick/
Passons maintenant aux bonnes nouvelles:
Vous pouvez utiliser la detailpropriété de l'événement pour détecter le nombre de clics liés à l'événement. Cela rend les doubles clics à l'intérieur clickassez faciles à détecter.
Le problème demeure de détecter les clics simples et s'ils font ou non partie d'un double clic. Pour cela, nous revenons à l'utilisation d'une minuterie et setTimeout.
Enveloppant le tout ensemble, avec l'utilisation d'un attribut de données (pour éviter une variable globale) et sans avoir besoin de compter les clics nous-mêmes, nous obtenons:
HTML:
<div class="clickit" style="font-size: 200%; margin: 2em; padding: 0.25em; background: orange;">Double click me</div>
<div id="log" style="background: #efefef;"></div>
JavaScript:
<script>
var clickTimeoutID;
$( document ).ready(function() {
$( '.clickit' ).click( function( event ) {
if ( event.originalEvent.detail === 1 ) {
$( '#log' ).append( '(Event:) Single click event received.<br>' );
/** Is this a true single click or it it a single click that's part of a double click?
* The only way to find out is to wait it for either a specific amount of time or the `dblclick` event.
**/
clickTimeoutID = window.setTimeout(
function() {
$( '#log' ).append( 'USER BEHAVIOR: Single click detected.<br><br>' );
},
500 // how much time users have to perform the second click in a double click -- see accessibility note below.
);
} else if ( event.originalEvent.detail === 2 ) {
$( '#log' ).append( '(Event:) Double click event received.<br>' );
$( '#log' ).append( 'USER BEHAVIOR: Double click detected.<br>' );
window.clearTimeout( clickTimeoutID ); // it's a dblclick, so cancel the single click behavior.
} // triple, quadruple, etc. clicks are ignored.
});
});
</script>
Démo:
JSfiddle
Remarques sur l'accessibilité et les vitesses de double-clic:
- Comme le dit Wikipedia "Le délai maximum requis pour que deux clics consécutifs soient interprétés comme un double-clic n'est pas normalisé."
- Aucun moyen de détecter la vitesse du double-clic du système dans le navigateur.
- Semble que la valeur par défaut est de 500 ms et la plage de 100 à 900 mm sous Windows ( source )
- Pensez aux personnes handicapées qui définissent, dans leurs paramètres de système d'exploitation, la vitesse du double-clic la plus lente.
- Si la vitesse du double-clic du système est plus lente que notre valeur par défaut de 500 ms ci-dessus, les comportements de simple et double-clic seront déclenchés.
- Soit n'utilisez pas la combinaison d'un simple et d'un double clic sur un seul et même élément.
- Ou: ajoutez un paramètre dans les options pour avoir la possibilité d'augmenter la valeur.
Il a fallu du temps pour trouver une solution satisfaisante, j'espère que cela vous aidera!