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);
6 réponses
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 ".
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
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.
Remplacez 'dbclick'
par 'dblclick'
.
Utilisez dblclick
au lieu de dbclick
.
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
}
Questions connexes
Questions liées
De nouvelles questions
javascript
Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.