jQueryでObserverパターンを使用するときにカスタムイベントハンドラを複数回呼び出すのを防ぐ方法

jQueryを使用してオブザーバパターンを実装しています。私はどの要素がイベントに応答するのかわからないので、$（ 'body *'）のカスタムイベントをトリガーしています。つまり、仲間の開発者がイベントを知る必要なしにイベントに対応するコードを追加できるようにしたいと考えています。私が直面している問題は、カスタムイベントにバインドされた要素の子要素がハンドラを実行することです。これらの子要素がハンドラを実行しないようにする方法はありますか？その要素は不明であるため、要素自体をトリガーすることはできません。可能であれば、ターゲット要素にクラスを追加することを避けたいと思います。ここでjQueryでObserverパターンを使用するときにカスタムイベントハンドラを複数回呼び出すのを防ぐ方法

は、いくつかのサンプルコードです：

<html> 
    <head> 
    <title>test</title> 
    <script src="http://code.jquery.com/jquery-1.4.4.js"></script> 
    <script> 
     $(function() { 
     $('#clickMe').click(function() { 
      $('body *').trigger('myCustomEvent'); 
     }); 

     $('#someDiv').bind('myCustomEvent', function(e) { 
      alert('someDiv responding to myCustomEvent'); 
     }); 

     $('#someOtherDivAddedBySomeOtherGuyLaterOn').bind('myCustomEvent', function() { 
      alert('someOtherDivAddedBySomeOtherGuyLaterOn responding to myCustomEvent'); 
     }); 
     }); 
    </script> 
    </head> 
    <body> 
    <div id="someDiv"> 
     <span>a span</span> 
     <span>another span</span> 
    </div> 
    <div id="someOtherDivAddedBySomeOtherGuyLaterOn"> 
     <span>a span</span> 
     <span>another span</span> 
    </div> 
    <p><button type="button" id="clickMe">Click Me</button></p> 
    </body> 
</html>

出典

2011-06-29 Rob

子要素にイベントバブルを防ぐために自動的な方法があるかどうか、私は知りませんが、あなたが手動で既知の子要素にバブリング停止することができます。例：

$('#someDiv span').bind('myCustomEvent', function(e) { 
    e.stopPropagation(); 
});

更新：ここに作業コードの例を示します。

<!DOCTYPE HTML> 
<html> 
<head> 
<title>Test</title> 
<script src="js/jquery-1.6.1.min.js"></script> 
<script> 
    $(function() { 
     $('#clickMe').click(function() { 
      $('body *').trigger('myCustomEvent'); 
     }); 

     $('#someDiv').bind('myCustomEvent', function(e) { 
      console.log('someDiv responding to myCustomEvent'); 
     }); 

     $('#someDiv span, #someOtherDivAddedBySomeOtherGuyLaterOn span').bind('myCustomEvent', function(e) { 
      e.stopPropagation(); 
     }); 

     $('#someOtherDivAddedBySomeOtherGuyLaterOn').bind('myCustomEvent', function() { 
      console.log('someOtherDivAddedBySomeOtherGuyLaterOn responding to myCustomEvent'); 
     }); 
    }); 
</script> 
</head> 
<body> 
    <div id="someDiv"> 
     <span>a span</span> 
     <span id="another">another span</span> 
    </div> 
    <div id="someOtherDivAddedBySomeOtherGuyLaterOn"> 
     <span>a span</span> 
     <span>another span</span> 
    </div> 
    <p><button type="button" id="clickMe">Click Me</button></p> 
</body> 
</html>

出典

2011-06-30 02:24:43

私は上記のコードでそれを試して何もしませんでした。 – Rob

本当ですか？わたしにはできる。あなたの構文をチェックしてください - あなたのコンソールのJSエラー？ –

申し訳ありませんが、私はあなたの答えを誤解しました。私の解決策は、イベントを文書にバインドすることだと思います。 – Rob

jQueryでObserverパターンを使用するときにカスタムイベントハンドラを複数回呼び出すのを防ぐ方法

答えて

関連する問題