Necesita cancelar eventos de clic/mouseup cuando se hace doble clic en evento detectado

Question

¿Cómo se hace esto?

Answer 1

Esta es una buena pregunta, y realmente no creo que se pueda hacer fácilmente. (Some discussion on this)

Si es super chulo importante que tiene esta funcionalidad, se podía entrar ilegalmente en él de este modo:

function singleClick(e) { 
    // do something, "this" will be the DOM element 
} 

function doubleClick(e) { 
    // do something, "this" will be the DOM element 
} 

$(selector).click(function(e) { 
    var that = this; 
    setTimeout(function() { 
     var dblclick = parseInt($(that).data('double'), 10); 
     if (dblclick > 0) { 
      $(that).data('double', dblclick-1); 
     } else { 
      singleClick.call(that, e); 
     } 
    }, 300); 
}).dblclick(function(e) { 
    $(this).data('double', 2); 
    doubleClick.call(this, e); 
}); 

Y aquí es un example of it at work.

Como se señala en los comentarios, hay un complemento para esto que hace bastante lo que hice arriba, pero lo empaqueta para que no tenga que ver lo feo: FixClick.

Answer 2

La técnica descrita en las otras respuestas se conoce como debouncing.

Answer 3

Raymond Chen ha discutido algunos de los implications of single-versus-double clicking, aunque habla en el contexto de Windows, lo que dice es relevante para el diseño de la interfaz de usuario basada en el navegador.

Básicamente, la acción realizada con un doble clic debería ser una acción lógica después de un solo clic. Entonces, por ejemplo, en una IU de escritorio, un solo clic selecciona un elemento y el doble clic lo abre (por ejemplo, abre el archivo o inicia la aplicación). El usuario debería seleccionar el archivo para abrirlo de todos modos, por lo que no importa que la acción de un solo clic se realice antes de la acción de doble clic.

Si tiene un componente de IU cuya acción de doble clic no está relacionada con la acción de un solo clic, de modo que es necesario evitar que ocurra un solo clic una vez que el sistema se da cuenta de que se trata de un doble clic, entonces realmente deberías reconsiderar tu diseño. Los usuarios lo encontrarán incómodo y contrario a la intuición, ya que no actuará de la manera en que están acostumbrados a las cosas que actúan.

Si aún quiere seguir así, tendrá que usar la técnica antirrebote (en cuyo caso se retrasarán todas las acciones de un solo clic) o implementar algún mecanismo mediante el cual el manejador de doble clic deshaga el trabajo hecho por el manejador de un solo clic.

También debe tener en cuenta que algunos usuarios establecen un tiempo de doble clic muy largo. Alguien con, por ejemplo, manos artríticas podría tener un doble clic de más de un segundo conjunto en sus preferencias del sistema, por lo que la técnica de antirrebote basada en un período de tiempo arbitrario de su elección hará que su UI sea inaccesible para esas personas si tomar la acción de un solo clic no permite realizar la acción de doble clic. La técnica de "deshacer lo que acaba de ocurrir con un solo clic" es la única solución viable para esto, hasta donde yo sé.

Answer 4

jQuery Sparkle proporciona una solución limpia y elegante para esto, 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 el código fuente para definir el evento personalizado here.

Es de código abierto bajo la licencia AGPL, por lo que puede tomarse lo que necesita 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 5

Si se trata de un botón que envía un formulario (que no es necesariamente el caso del póster original, pero puede ser el caso para otras personas que llegan aquí a través de Google), una opción más fácil sería desactivar el elemento se hace clic en su controlador de evento click:

$(selector).click(function(e) { 
    $(this).prop('disable', true); 
}