Comment différencier l'événement de simple clic et l'événement de double clic ?

Question

J'ai un seul bouton dans li avec id "my_id" . J'ai attaché deux événements jQuery avec cet élément

1.

$("#my_id").click(function() { 
    alert('single click');
});

2.

$("#my_id").dblclick(function() {
    alert('double click');
});

Mais à chaque fois, ça me donne le single click

Answer 1

Le comportement de la dblclick L'événement est expliqué à Quirksmode .

L'ordre des événements pour un dblclick est :

1. mousedown
2. mouseup
3. cliquez sur
4. mousedown
5. mouseup
6. cliquez sur
7. dblclick

La seule exception à cette règle est (bien sûr) Internet Explorer avec son ordre personnalisé de :

1. mousedown
2. mouseup
3. cliquez sur
4. mouseup
5. dblclick

Comme vous pouvez le constater, l'écoute simultanée de ces deux événements sur le même élément entraînera des appels supplémentaires à la fonction click manipulateur.

Answer 2

Vous devez utiliser un délai d'attente pour vérifier s'il y a un autre clic après le premier.

Voici l'astuce :

// Author:  Jacek Becela
// Source:  http://gist.github.com/399624
// License: MIT

jQuery.fn.single_double_click = function(single_click_callback, double_click_callback, timeout) {
  return this.each(function(){
    var clicks = 0, self = this;
    jQuery(this).click(function(event){
      clicks++;
      if (clicks == 1) {
        setTimeout(function(){
          if(clicks == 1) {
            single_click_callback.call(self, event);
          } else {
            double_click_callback.call(self, event);
          }
          clicks = 0;
        }, timeout || 300);
      }
    });
  });
}

Utilisation :

$("button").single_double_click(function () {
  alert("Try double-clicking me!")
}, function () {
  alert("Double click detected, I'm hiding")
  $(this).hide()
})

<button>Click Me!</button>

EDIT :

Comme indiqué ci-dessous, il est préférable d'utiliser la méthode native dblclick événement : http://www.quirksmode.org/dom/events/click.html

Ou celle fournie par jQuery : http://api.jquery.com/dblclick/

Answer 3

Une fonction simple. Aucun jquery ou autre framework n'est nécessaire. Passez vos fonctions en paramètres

<div onclick="doubleclick(this, function(){alert('single')}, function(){alert('double')})">click me</div>
    <script>
        function doubleclick(el, onsingle, ondouble) {
            if (el.getAttribute("data-dblclick") == null) {
                el.setAttribute("data-dblclick", 1);
                setTimeout(function () {
                    if (el.getAttribute("data-dblclick") == 1) {
                        onsingle();
                    }
                    el.removeAttribute("data-dblclick");
                }, 300);
            } else {
                el.removeAttribute("data-dblclick");
                ondouble();
            }
        }
    </script>

Answer 4

Je crains que le comportement ne dépende du navigateur :

Il est déconseillé de lier des gestionnaires aux événements événements click et dblclick pour le même élément. le même élément. La séquence des événements déclenchés varie d'un navigateur d'un navigateur à l'autre, certains recevant deux deux événements de clic avant le dblclick et d'autres un seul. Double-clic (temps maximal entre deux clics qui est détecté comme un double double clic) peut varier selon le système d'exploitation et le navigateur, et est souvent configurable par l'utilisateur.

http://api.jquery.com/dblclick/

En exécutant votre code dans Firefox, l'alert() dans la section click() vous empêche de cliquer une seconde fois. Si vous supprimez cette alerte, vous obtenez les deux événements.

Answer 5

Pour faire un double clic (cliquer deux fois), il faut d'abord cliquer une fois. Le site click() se déclenche lors du premier clic, et comme l'alerte s'affiche, vous n'avez pas la possibilité de cliquer une seconde fois pour déclencher la fonction dblclick() manipulateur.

Changez vos gestionnaires pour faire autre chose qu'un alert() et vous verrez le comportement. (changez peut-être la couleur de fond de l'élément) :

$("#my_id").click(function() { 
    $(this).css('backgroundColor', 'red')
});

$("#my_id").dblclick(function() {
    $(this).css('backgroundColor', 'green')
});