web-dev-qa-db-ja.com

jQuery複数のイベントハンドラー-キャンセルする方法

2つの異なる時間にクリックイベントにバインドされた2つの関数があります(jQueryを使用)。それらが起動される順序は重要です。彼らは正しい順序で発砲しています。問題は、最初の関数がfalseを返しても、2番目の関数がまだ起動していることです。

イベントを適切にキャンセルするにはどうすればよいですか?

コード例:

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

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

ページをクリックすると、「b」警告メッセージが引き続き表示されます。これは受け入れがたい!

44
Josh Stodola

JQueryイベントオブジェクトの stopImmediatePropagation 関数を使用します。

残りのハンドラーが実行されないようにします。このメソッドは、event.stopPropagation()を呼び出してバブリングも停止します。

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

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

おかげで、関数を再定義するためにunbindが機能します。

  $(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');  });
                }
            }
        })
2
Rodrigo Jara

私が最初に尋ねるのは、なぜtwo関数が同じクリックイベントにバインドされているのですか?コードにアクセスできたら、1回の呼び出しを実行してみませんか?

$(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);
        }
    });
});
2
Seb

アンバインドは役立ちますか?

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

Nickfの発言が機能しない場合は、小さな状態マシンを使用できます。

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;
});

かわいらしいソリューションではありませんが、機能します。

0
fmsf