jQuery previene otros eventos después de un clic

Question

Estoy tratando de evitar clics múltiples en enlaces y elementos, lo que está causando problemas.

Estoy utilizando jQuery para enlazar eventos de clics a botones (jQuery UI) y enlaces de imagen (<a><img /></a>).

¿Hay alguna manera de hacer, una vez por todas, evitar que otros eventos se activen después de un clic?

¿O tengo que mantener una variable global llamada _isProcessing y establecerla en verdadero para cada manejador de eventos?

Gracias

Editar: (clarificación) Gracias por sus respuestas, mi problema no es impedir la propagación del evento, pero la prevención de varios clics concurrentes.

Answer 1

Existen varias formas de evitar que los clics simultáneos ejecuten el código.

Una forma es unbind('click') en el elemento, luego .bind() de nuevo cuando esté listo.

Prefiero usar algún tipo de bandera. Podría ser una variable, pero prefiero asignar una clase al elemento, como .processing, y eliminarlo cuando haya terminado. Entonces, haría que el controlador verifique la existencia de esa clase para determinar si el código debe ejecutarse.

$('someElement').click(function() { 
    var $th = $(this); 
    if($th.hasClass('processing')) 
      return; 
    $th.addClass('processing'); 
    // normal code to run 
    // then when done remove the class 
    $th.removeClass('processing'); 
}); 

Otra opción es utilizar los elementos .data() para establecer una bandera similar, como $(this).data('processing', true); A continuación, establezca en false cuando haya terminado.

Answer 2

¿has comprobado preventDefault?

$("a").click(function(e) { 
    e.preventDefault(); 
} 

también se podría tratar stopImmediatePropagation() o stopPropagation()

---

También podría mirar en el evento one().

Adjuntar un controlador a un evento para los elementos . El controlador se ejecuta al más una vez por elemento.

Answer 3

Devuelva false desde sus controladores de eventos, o llame al ev.stopPropagation() en cada controlador.

Answer 4

Hay event.preventDefault, event.stopPropagation y devuelve falso como ya se ha indicado.

$("a").click(function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    return false; 
} 

Answer 5

usted tiene un par de opciones:

1. Si los botones/enlaces que se recargue la página , simplemente puede desenlazar el controlador de eventos clic:

   $('input:submit').click(fumction() { 
       $(this).unbind('click'); 
       // Handle event here 
   }) 
   

2. Usted puede deshabilitar los botones, y volver a habilitarlos una vez que haya terminado (creo que esto también debería funcionar con <input type="image">):

   $('input:submit').click(function() { 
       $(this).attr('disabled', 'disabled'); 
       // It also helps to let the user know what's going on: 
       $(this).val('Processing...'); 
       // Handle event here 
       $(this).removeAttr('disabled'); 
   }) 
   

   No creo que esto funcione en los enlaces.

Answer 6

Otra manera sería utilizar event.stopPropagation() y event.isPropagationStopped() para la señalización:

Ejemplo:

$(button).click(function(e){ 
    if(e.isPropagationStopped()) 
     return; // propagation was stopped, so stop further execution 

    // if you got this far - this event handler was called first 
    // custom logic goes here 

    // stop event propagation to signal other handlers 
    e.stopPropagation(); 

    // if you need, call e.preventDefault() to prevent default behaviour 
}); 

Repita misma lógica para otros controladores de eventos.