javascript - fantasma - onclick html ejemplo

Es necesario cancelar los eventos de clic/mouse cuando se hace doble clic en evento detectado

Question

¿Cómo se hace esto?

Answer 1

Esta es una buena pregunta, y en realidad no creo que se pueda hacer fácilmente. ( Algunos debates sobre esto )

Si es muy importante para usted tener esta funcionalidad, puede hackearla de esta manera:

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í hay un ejemplo de eso en el trabajo .

Como se señala en los comentarios, hay un complemento para esto que hace bastante bien 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 algunas de las implicaciones del clic simple versus doble : 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 opción lógica después de un solo clic. Entonces, por ejemplo, en una interfaz de usuario 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, por lo que es necesario evitar que ocurra la acción de un solo clic una vez que el sistema se da cuenta de que se trata de un doble clic, entonces debe reconsiderar su 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 todavía quiere seguir así, tendrá que utilizar la técnica antirrebote (en cuyo caso se retrasarán todas las acciones de un solo clic) o bien implementar algún mecanismo mediante el cual el manejador de doble clic deshaga el trabajo realizado 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

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 deshabilitar el elemento que se está haciendo clic en su controlador de eventos click:

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

Answer 5

jQuery Sparkle proporciona una solución limpia y elegante para esto, mediante la implementación de un evento personalizado singleclick. Al hacer esto, puede usarlo como cualquier otro evento, así que:

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

También proporciona eventos personalizados para el último y primer clic 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!'');
});

here puede encontrar el código fuente para definir el evento personalizado.

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!