Controladores de eventos múltiples de jQuery: ¿cómo cancelar?

4 minutos de lectura

avatar de usuario
jose stodola

Tengo dos funciones vinculadas a un evento de clic en dos momentos diferentes (usando jQuery). El orden en que se disparan es significativo. Están disparando en el orden correcto. El problema es que, cuando la primera función devuelve falso, ¡la segunda función todavía se activa!

¿Cómo puedo cancelar correctamente el evento?

Código de ejemplo:

$(document).click(function() { 
  alert('a');
  return false;
});

$(document).click(function() {
  alert('b');
});

Seguirá viendo el mensaje de alerta “b” al hacer clic en la página. ¡Esto es inaceptable!

Utilizar el stopImmediatePropagation función del objeto de evento jQuery.

Evita que se ejecuten el resto de los controladores. Este método también detiene el burbujeo llamando a event.stopPropagation().

$(document).click(function(event) { 
  alert('a');
  event.stopImmediatePropagation();
  return false;
});

$(document).click(function() {
  alert('b');
});

  • Es posible que desee tener en cuenta que debe usar jQuery versión 1.3 y superior para que esto funcione.

    –Josh Stodola

    17 de marzo de 2009 a las 0:08

  • ¿Qué pasa con $(document).on(“touchstart click”, “.myelement”, function(e) {e.stopImmediatePropagtion(); //ejecutar la función aquí})… Si el inicio táctil se activa primero en la tableta, cancela el clic de disparo si mantengo el dedo presionado?

    – Alex

    28 de junio de 2012 a las 18:52


Lo primero que pregunto es: ¿por qué tienes dos ¿Funciones vinculadas al mismo evento de clic? Teniendo acceso al código, ¿por qué no haces esa única llamada?

$(function (){
    var callbackOne = function(e){
        alert("I'm the first callback... Warning, I might return false!");
        return false;
    };

    var callbackTwo = function(e){
        alert("I'm the second callback");
    };

    $(document).click(function (e){
        if(callbackOne(e)){
            callbackTwo(e);
        }
    });
});

  • Organización. Hay un montón de código Javascript en esta aplicación, y está dividido en VARIOS archivos. De esta manera, cada página descarga solo lo necesario, lo que se traduce en tiempos de carga rápidos. Tengo un controlador HTTP que los combina, los comprime y los almacena en caché también, por lo que todos se recuperan en una sola solicitud.

    –Josh Stodola

    16 de marzo de 2009 a las 23:32

  • Está bien. Entonces, ¿existe realmente la necesidad de -1? Solo trato de ayudar… Su explicación es suficiente para que todos sepamos que no es la solución. para ti.

    – Seb

    16 de marzo de 2009 a las 23:34

  • ¡Perdón entonces! 🙂 No sé quién querría desperdiciar su reputación rechazando una posible respuesta válida para otras personas…

    – Seb

    16 de marzo de 2009 a las 23:37

  • +1. He respondido muchas preguntas preguntando “¿Por qué lo haces de esta manera en lugar de esta otra?” A veces, el autor de la pregunta no es consciente o se olvidó de considerar otras opciones.

    –Spencer Ruport

    17 de marzo de 2009 a las 0:24

avatar de usuario
Rodrigo Jara

Gracias, unbind funciona para redefinir funciones.

  $(document).ready(function(){
        $("#buscar_mercaderia").click(function(){ alert('Seleccione Tipo de mercaderia'); 
   });
$(".tipo").live('click',function(){
            if($(this).attr('checked')!=''){
                if($(this).val()=='libro'){
                    $("#buscar_mercaderia").unbind('click');
                    $("#buscar_mercaderia").click(function(){  window.open('buscar_libro.php','Buscar Libros', 'width=800,height=500'); });
                }else if($(this).val()=='otra'){
                    $("#buscar_mercaderia").unbind('click');
                    $("#buscar_mercaderia").click(function(){ window.open('buscar_mercaderia.php','Buscar Mercaderias', 'width=800,height=500');  });
                }
            }
        })

¿Usar unbind ayuda?

$(document).click(function() { 
  alert('a');
  $(this).unbind('click');
  return false;
});

avatar de usuario
fmsf

Si lo que dijo nickf no funciona, podría usar una pequeña máquina de estado:

var trigger = 0;

$(document).click(function() { 

  alert('a');
  if(you_want_to_return_false) {
    trigger = 1;
    return false;
  }
});

$(document).click(function() {
  if(trigger !== 0) {
  alert('b');
  } 
  trigger = 0;
});

No es la solución más bonita, pero funcionará.

  • bueno, mi idea obras es solo que lo rompe al mismo tiempo. Sin embargo, +1 para esta idea.

    – nickf

    16 de marzo de 2009 a las 23:20

  • Este método se rompe exactamente de la misma manera que el otro, excepto que tiene más código. Corrígeme si estoy equivocado.

    –Josh Stodola

    16 de marzo de 2009 a las 23:22

avatar de usuario
spencer millas

Otra solución es eliminar el rebote o acelerar la función.

De esta manera, puede asegurarse de que, a pesar de que se active varias veces, solo se ejecute dentro de una duración determinada. Esto permitiría que su código funcione tal cual.

  • bueno, mi idea obras es solo que lo rompe al mismo tiempo. Sin embargo, +1 para esta idea.

    – nickf

    16 de marzo de 2009 a las 23:20

  • Este método se rompe exactamente de la misma manera que el otro, excepto que tiene más código. Corrígeme si estoy equivocado.

    –Josh Stodola

    16 de marzo de 2009 a las 23:22

¿Ha sido útil esta solución?