1

私の目標は、特定の条件が満たされない限り (ユーザーが入力要素に特定の単語を持っている場合)、すべてのクリック イベント (クリックされたときに HTML 内の要素の非表示/表示) を防ぐことです。

そのため、そのロジックをドキュメントまたは「html」のクリック ハンドラーに追加しようとしましたが、バブル アップのために他の要素のクリック ハンドラーが最初に起動しました。

だから私はそのロジックを「*」に添付しようとしましたが、今ではクリックハンドラが最初に起動しますが、stopPropagation、preventDefault を無視して false を返し、他の要素にも伝播します。 

$(document).ready(function(){    
  $("*").click(function(event){
    if ($("#user").val() !== "admin"){
      console.log("1");
      event.stopPropagation();
      event.preventDefault();  
      return false;  
    }
  });
  $("#user").click(function(event){
    console.log("2");
    // do something
  });
});
  1. false/stopPropagation が返されたためにそれ以上の伝播が発生しないはずなのに、「1」の後に「2」がコンソールに書き込まれるのはなぜですか?
  2. jQueryを使用して目標を達成するにはどうすればよいですか?

ありがとう！

4

1 に答える 1

1

  1. stopPropagation()イベントが祖先ツリーのそれ以上上に伝播するのを防ぎます。ただし、現在の残りのイベント ハンドラーが起動されるのを防ぐことはできません。

    これを行う(それ以上の伝播をstopImmediatePropagation()防止し、現在の要素でそれ以上のイベント ハンドラーが起動されないようにする)には、(代わりに、wellではなく)を呼び出す必要があります。

  2. この方法ですべての要素にイベント ハンドラーをアタッチし、stopImmediatePropagation()(およびpreventDefault())を呼び出すと、すべてのクリックが効果を発揮しなくなります。前にイベント ハンドラーがバインドされていない場合(ハンドラーは順番に実行されるため、既に発生したハンドラーを元に戻すことはできません)。

    ただし、すべての要素にハンドラーを見つけて列挙し、アタッチするのはかなりコストがかかるため、これは良いことではありません。

    より良いものにするために、オプションは次のいずれかです。

    1. clickにイベントを付けてdocument、単純preventDefault()に を犠牲にしstopImmediatePropagation()ます。

    2. #user各イベント ハンドラーの状態を確認します。独自のラッパー関数をローリングすることで、この問題を緩和できます。

      function checkUserState(then) {
    return function () {
        if ($("#user").val() !== "admin") {
            then.apply(this, arguments);
        }
    };
};

      ...そのように使用します。

      $("#user").click(checkUserState(function(event){
    console.log("2");
}));

    コメントに記載されているように、イベント委任を使用するという提案は意図的に避けてnいstopPropagation()ます。

于 2013-05-20T22:48:08.647 に答える