¿Cómo se puede usar jQuery para manejar el temporizador al hacer clic, cliquear separación

Question

Estoy usando el jQueryFileTree en http://abeautifulsite.net/notebook/58 y quiero distinguir entre el dblclick y hacer clic en eventos ya que un clic siempre se activa mediante un dblclick.

Google es una técnica en la que el clic se maneja con un temporizador que se activa cuando un clic doble no lo cancela.

¿Hay alguna manera de que esto se pueda utilizar con jQuery y el ejemplo de jQuery de una manera elegante?

Answer 1

Puede utilizar setTimeout() y clearTimeout() para realizar la funcionalidad de temporizador:

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 chispa proporciona una solución elegante para este limpia, mediante la implementación de un evento personalizado SingleClick. De esta manera, se puede usar como cualquier otro evento, por lo que:

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

También proporciona eventos personalizados para los primeros y últimos clics de una serie de clics. ¡Y el evento personalizado lastclick en realidad le devuelve la cantidad de clics! ¡Así que podrías hacer esto!

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

Puede encontrar la demostración apropiada mostrar lo que acabo de decir here derecho y el código fuente para definir el evento personalizado derecha here. Es de código abierto bajo la licencia AGPL, por lo que puede tomarse lo que necesite de forma gratuita ¡sin preocupaciones! :-) También se desarrolla activamente en el día a día, por lo que nunca estará corto de apoyo.

Pero lo más importante es un marco de plugin/efecto DRY que le permite desarrollar complementos y extensiones mucho más fácilmente. ¡Así que espero que esto ayude a lograr ese objetivo!

Answer 3

Mira el siguiente código

$("#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 aquí http://jsfiddle.net/cB484/