Je me demande simplement pourquoi l'événement click se produit lorsque je dbclick un élément?

J'ai ce code :( JSBIN )

HTML

<p id="hello">Hello World</p>

JavaScript

document.getElementById('hello').addEventListener('click', function(e){
  e.preventDefault();
  this.style.background = 'red';
}, false);
document.getElementById('hello').addEventListener('dbclick', function(){
  this.style.background = 'yellow';
}, false);

Cela devrait faire différentes choses pour le clic et le double-clic, mais il semble que lorsque vous double-cliquez sur l'événement p, il intercepte click à l'avance et ignorez le double-clic.

J'ai également essayé preventDefault l'événement click. Comment puis-je écouter simplement dbclick?

MISE À JOUR

J'avais une faute de frappe dans mon code. dbclick est faux. C'est dblclick. Quoi qu'il en soit, le problème existe toujours. Lorsque l'utilisateur double-clique, l'événement click se produit.

Il s'agit d'un code mis à jour qui le prouve :( JSBin)

document.getElementById('hello').addEventListener('click', function(e){
  e.preventDefault();
  this.style.background = 'red';
  this.innerText = "Hello World clicked";
}, false);
document.getElementById('hello').addEventListener('dblclick', function(){
  this.style.background = 'green';
}, false); 
12
Mohsen 26 oct. 2011 à 04:49

6 réponses

Meilleure réponse

dblclick n'est pas magique: bien que le deuxième click rapide déclenche l'événement dblclick, le premier click a déjà déclenché son propre gestionnaire d'événements.

Vous ne devriez pratiquement jamais définir à la fois un événement click et dblclick sur un élément DOM; lorsque vous le faites, vous aurez besoin de trucs sophistiqués avec des minuteries pour atténuer le problème.

Dans ce scénario spécifique, vous devrez également corriger votre faute de frappe (s/dbclick/dblclick/) pour que l'événement se déclenche.

Notez également que dblclick ne fait pas partie de la spécification DOM du tout (non présent dans DOM niveau 2 1.6.2). Pour cette raison, il est appelé "DOM niveau 0 ".

16
Lightness Races in Orbit 26 oct. 2011 à 00:58

Pour répondre à la question révisée (Comment gérer mutuellement exclusivement click et dblclick), vous devez retarder l'événement click jusqu'à ce que dblclick ne soit plus possible. Cela donne un léger décalage (par exemple, 500 ms) à la gestion des clics, mais sinon, le DOM n'a aucun moyen de prédire si un deuxième clic arrivera.

Un exemple de script se trouve dans cette réponse: https://stackoverflow.com/a/11057483/43217

0
Community 23 mai 2017 à 12:09

Je soupçonne que vous travaillez sur un ordinateur lent. Sur un ordinateur lent, un double clic peut être interprété comme deux simples clics avec un intervalle de temps significatif. Vous pouvez tester le réglage de la souris et modifier le réglage du double-clic. Cela devrait résoudre le problème. Si votre ordinateur est très rapide et n'a pas de problème de décalage, votre problème pourrait être ailleurs. Il est très peu probable qu'un double-clic puisse être considéré comme un simple clic comme bogue de code (celui que vous avez publié). Le problème pourrait être ailleurs sinon lenteur de l'ordinateur.

-3
Hammad Khan 26 oct. 2011 à 01:11

Remplacez 'dbclick' par 'dblclick'.

9
Mohsen 26 oct. 2011 à 00:59

Utilisez dblclick au lieu de dbclick.

2
chown 18 nov. 2011 à 01:48

Cela fonctionne pour moi (en utilisant la bibliothèque d3, mais d pourrait également être un objet dictionnaire):

function log(s){try{console.log(s)}catch(e){}} // for debugging

var click_d = null

function click(d){
    log("click")
    click_d = d
    setTimeout(click_action, 200)
}

function click_action(){
    log("click_action")
    if(click_d == null){
        log("aborted")
        return
    }
    d = click_d

    // do things with d
}

function doubleclick(d){
    log("dblclick")
    click_d = null

    // do things with d
}
1
Cees Timmerman 2 mai 2014 à 16:30
7897558