[javascript] come differenziare l'evento single click e l'evento doppio clic?


Answers

Il comportamento dell'evento dblclick è spiegato in http://www.quirksmode.org/dom/events/click.html .

L'ordine degli eventi per un dblclick è:

  1. mousedown
  2. MouseUp
  3. clic
  4. mousedown
  5. MouseUp
  6. clic
  7. DblClick

L'unica eccezione a questa regola è (ovviamente) Internet Explorer con il loro ordine personalizzato di:

  1. mousedown
  2. MouseUp
  3. clic
  4. MouseUp
  5. DblClick

Come puoi vedere, l'ascolto di entrambi gli eventi sullo stesso elemento comporterà chiamate extra al tuo gestore di click .

Question

Ho un singolo pulsante in li con ID "my_id" . Ho allegato two jquery eventi two jquery con questo elemento

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

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

Ma ogni volta mi da il single click




Ho scritto un semplice plugin jQuery che consente di utilizzare un evento personalizzato 'singleclick' per differenziare un singolo clic da un doppio clic:

https://github.com/omriyariv/jquery-singleclick

$('#someDiv').on('singleclick', function(e) {
    // The event will be fired with a small delay.
    console.log('This is certainly a single-click');
}



Ho paura che il comportamento dipende dal browser:

È sconsigliabile associare i gestori ad entrambi gli eventi click e dblclick per lo stesso elemento. La sequenza di eventi attivati ​​varia da browser a browser, con alcuni che ricevono due eventi click prima di dblclick e altri solo uno. La sensibilità del doppio clic (tempo massimo tra i clic rilevati come doppio clic) può variare a seconda del sistema operativo e del browser ed è spesso configurabile dall'utente.

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

Eseguendo il tuo codice in Firefox, l'alert () nel gestore click() ti impedisce di fare clic una seconda volta. Se rimuovi questo avviso, ottieni entrambi gli eventi.




Nessuna di queste risposte ha soddisfatto le mie esigenze, quindi ho creato una soluzione ispirata al profilo pubblicato da @AdrienSchuler. Utilizzare questa soluzione solo quando si desidera associare un singolo clic E un doppio clic su un elemento. In caso contrario, consiglio di utilizzare i listener nativi e dblclick .

Queste sono le differenze:

  • Vanillajs, niente dipendenza
  • Non aspettare sul setTimeout per gestire il click o il gestore di doppio clic
  • Quando si fa doppio clic su prima, si attiva il gestore di clic, quindi il gestore di doppio clic

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;
        }
    };
}

Uso:

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

Di seguito è riportato l'utilizzo in un jsfiddle, il pulsante jQuery è il comportamento della risposta accettata.

jsfiddle




Ecco un'alternativa del codice di jeum per un numero arbitrario di eventi:

 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));

Necessario per un'applicazione cytoscape.js .




Links