comment différencier événement de clic et double-cliquez sur l'événement?

Le comportement de la dblclick événement est expliqué au 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) d'Internet Explorer avec leur ordre de:

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

Comme vous pouvez le voir, l'écoute de ces deux événements ensemble sur le même élément entraînera des appels supplémentaires à votre click gestionnaire.

J'ai peur que le comportement du navigateur dépendante:

Il est déconseillé de lier les gestionnaires de
à la fois le clic et double clic événements pour
le même élément. La séquence de
des événements déclenchés varie d'un navigateur
pour le navigateur, avec certains de recevoir deux
cliquez sur les événements avant le double clic et
d'autres un seul. Double-cliquez sur
sensibilité (temps maximum entre
les clics qui est détecté comme un double
cliquez sur) peut varier selon le système d'exploitation
et navigateur, et est souvent
configurable par l'utilisateur.

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

L'exécution de votre code dans Firefox, l'alert() dans le click() gestionnaire ne vous empêche de cliquer une seconde fois. Si vous supprimez une telle alerte, vous obtenez les deux événements.

Aucune de ces réponses satisfait mes besoins, j'ai donc créé une solution inspirée par le gist posté par @AdrienSchuler. Utiliser cette solution que si vous voulez lier un seul clic ET double-cliquez sur un élément. Sinon, je recommande d'utiliser le natif click et dblclick auditeurs.

Ces différences:

• Vanillajs, Pas de dépendances
• N'attendez pas à la setTimeout pour gérer le clic ou double-cliquez sur gestionnaire de
• En double-cliquant d'abord les feux de l'gestionnaire de clic, puis la doubleclick gestionnaire

Javascript:

function makeDoubleClick(doubleClickCallback, singleClickCallback) {
    var clicks = 0, timeout;
    return function() {
        clicks++;
        if (clicks == 1) {
            singleClickCallback && singleClickCallback.apply(this, arguments);
            timeout = setTimeout(function() { clicks = 0; }, 400);
        } else {
            timeout && clearTimeout(timeout);
            doubleClickCallback && doubleClickCallback.apply(this, arguments);
            clicks = 0;
        }
    };
}

Utilisation:

var singleClick = function(){ console.log('single click') };
var doubleClick = function(){ console.log('double click') };
element.addEventListener('click', makeDoubleClick(doubleClick, singleClick));

Ci-dessous est l'utilisation dans un jsfiddle, le jQuery, le bouton est le comportement de la accepté de répondre.

jsfiddle

Un autre simple à la Vanille solution basée sur le A1rPun réponse (voir son violon pour le jQuery solution, et les deux sont en cette une).

Il semble que pour ne PAS déclencher d'un simple clic gestionnaire lorsque l'utilisateur double-clique, le seul gestionnaire de clic est nécessairement déclenchée après un délai...

var single = function(e){console.log('single')},
    double = function(e){console.log('double')};

var makeDoubleClick = function(e) {

  var clicks = 0,
      timeout;

  return function (e) {

    clicks++;

    if (clicks == 1) {
      timeout = setTimeout(function () {
        single(e);
        clicks = 0;
      }, 250);
    } else {
      clearTimeout(timeout);
      double(e);
      clicks = 0;
    }
  };
}
document.getElementById('btnVanilla').addEventListener('click', makeDoubleClick(), false);

Voici une autre de jeum code pour un nombre arbitraire d'événements:

 var multiClickHandler = function (handlers, delay) {
    var clicks = 0, timeout, delay = delay || 250;
    return function (e) {
      clicks++;
      clearTimeout(timeout);
      timeout = setTimeout(function () {
        if(handlers[clicks]) handlers[clicks](e);
        clicks = 0;
      }, delay);
    };
  }

  cy.on('click', 'node', multiClickHandler({
    1: function(e){console.log('single clicked ', e.cyTarget.id())},
    2: function(e){console.log('double clicked ', e.cyTarget.id())},
    3: function(e){console.log('triple clicked ', e.cyTarget.id())},
    4: function(e){console.log('quadro clicked ', e.cyTarget.id())},
    //...
  }, 300));

Nécessaire pour un cytoscape.js app.

Comment faire la différence entre les simples clics et double clique sur un seul et même élément?

Si vous n'avez pas besoin de les mélanger, vous pouvez compter sur click et dblclick et chacun d'eux de faire le travail tout aussi bien.

Un problème se pose lorsque vous essayez de les mélanger: un dblclick événement va déclencher une click événement ainsi, de sorte que vous devez déterminer si un seul clic est un "stand-alone" seul clic ou un double clic.

En outre: vous ne devez pas utiliser deux click et dblclick sur un seul et même élément:

Il est déconseillé de lier les gestionnaires à la fois le clic et double clic événements pour le même élément. La séquence des événements déclenchés varie d'un navigateur à l'autre, certains de recevoir deux événements click avant le double clic et d'autres un seul. Double-cliquez sur la sensibilité (temps maximum entre les clics qui est 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/

Maintenant la bonne nouvelle:

Vous pouvez utiliser l'événement detail propriété pour détecter le nombre de clics liées à l'événement. Cela fait un double-clic à l'intérieur de click assez facile à détecter.

Le problème reste de détecter une seule clique et si oui ou non ils font partie d'un double clic. Pour cela, nous sommes de retour à l'aide d'une minuterie et setTimeout.

Enveloppant, tous ensemble, avec l'utilisation d'un attribut de données (pour éviter une variable globale) et sans avoir besoin de compter les clics de 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

---

Notes sur l'accessibilité et double-cliquez vitesses:

• Comme Wikipédia, il met "Le délai maximum nécessaire pour deux mandats consécutifs de clics pour être interprété comme un double-clic n'est pas normalisée."
• Aucun moyen de détecter le système de la vitesse du double-clic dans le navigateur.
• Semble que la valeur par défaut est de 500 ms et la gamme 100-900mms sur Windows (source)
• De penser à des personnes handicapées qui, ensemble, dans leur paramètres du système d'exploitation, la vitesse du double clic pour son plus lent.
  • Si le système double-cliquez sur la vitesse est plus lente que nos valeurs par défaut de 500 ms au-dessus, à la fois simple et double-cliquez sur les comportements sera déclenchée.
  • Ne l'utilisez pas compter sur combiné unique et double-cliquez sur un seul et même élément.
  • Ou: ajouter un paramètre dans les options pour avoir la capacité d'augmenter la valeur.

---

Il a fallu un certain temps pour trouver une solution satisfaisante, j'espère que cela aide!