Come jQuery può essere usato per gestire il timer in click, dblclick separazione

Question

Sto usando il jQueryFileTree al http://abeautifulsite.net/notebook/58 e voglio distinguere tra gli eventi dblclick e click come un clic è sempre attivato da un dblclick.

Googling su led è una tecnica in cui il clic è gestito da un timer che interviene quando un dblclick non lo annulla.

C'è un modo in cui questo può essere utilizzato con jQuery e l'esempio jQuery in modo elegante?

Answer 1

È possibile utilizzare setTimeout() e clearTimeout() per realizzare la funzionalità Timer:

var timeout; 
var delay = 500; // Delay in milliseconds 

$("...") 
    .click(function() { 
     timeout = setTimeout(function() { 
      // This inner function is called after the delay 
      // to handle the 'click-only' event. 
      alert('Click'); 
      timeout = null; 
     }, delay) 
    } 
    .dblclick(function() { 
     if (timeout) { 
      // Clear the timeout since this is a double-click and we don't want 
      // the 'click-only' code to run. 
      clearTimeout(timeout); 
      timeout = null; 
     } 
     // Double-click handling code goes here. 
     alert('Double-click'); 
    } 
; 

Answer 2

jQuery Sparkle fornisce una soluzione elegante pulita per questo, mediante l'attuazione di un evento personalizzato SingleClick. In questo modo, è possibile utilizzarlo come qualsiasi altro evento, quindi:

$('#el').singleclick(function(){}); 
// or event 
$('#el').bind('singleclick', function(){}); 

Fornisce anche eventi personalizzati per gli ultimi e primi scatti di una serie di scatti. E l'evento personalizzato lastclick restituisce effettivamente la quantità di clic indietro! Quindi potresti farlo!

$('#el').lastclick(function(event,clicks){ 
    if (clicks === 3) alert('Tripple Click!'); 
}); 

È possibile trovare il demo appropriata in mostra quello che ho appena detto a destra here e il codice sorgente per la definizione l'evento personalizzato destra here. È open source con licenza AGPL, quindi puoi sentirti libero di afferrare ciò che ti serve senza preoccuparti! :-) Inoltre è attivamente sviluppato su base giornaliera per non essere mai a corto di supporto.

Ma la cosa più importante è un DRY Plugin/Effect Framework che consente di sviluppare plugin ed estensioni molto più facilmente. Quindi spero che questo aiuti a raggiungere questo obiettivo!

Answer 3

un'occhiata al seguente codice di

$("#clickMe").click(function (e) { 
    var $this = $(this); 
    if ($this.hasClass('clicked')){ 
     alert("Double click"); 
     //here is your code for double click 
     return; 
    }else{ 
     $this.addClass('clicked'); 
     //your code for single click 
     setTimeout(function() { 
       $this.removeClass('clicked'); },500); 
    }//end of else 
}); 

Demo va qui http://jsfiddle.net/cB484/