JavaScript でのイベントのバブリングを防ぐ 2 つの方法

1. JS イベントバブリングとは何ですか?

オブジェクトで特定のタイプのイベント (onclick イベントなど) をトリガーする場合、このイベントはこのハンドラーを呼び出します。このイベント ハンドラーが定義されていない場合、またはイベントが true を返した場合、このイベントは処理されるまで (親オブジェクトの同様のイベントがすべてアクティブ化される)、このオブジェクトの親オブジェクトに内部から外部に伝播されます。オブジェクト階層の最上位レベル、つまりドキュメント オブジェクト (一部のブラウザーのウィンドウ) に到達しました。

2. ブロックメソッド

メソッド 1:event.stopPropagation()

<div>
    <p>段落文本内容
        <input type="button" value="点击" />
    </p>
</div>

// 为所有div元素绑定click事件
$("div").click( function(event){
    alert("div-click");
} );
//为所有p元素绑定click事件
$("p").click( function(event){
    alert("p-click");
} );
//为所有button元素绑定click事件
$(":button").click( function(event){
    alert("button-click");
    // 阻止事件冒泡到DOM树上
    event.stopPropagation(); // 只执行button的click，如果注释掉该行，将执行button、p和div的click （同类型的事件）  
} );

メソッド 2:event.target

ここで、イベント ハンドラー内の変数イベントがイベント オブジェクトを保持します。 event.target 属性には、イベントが発生したターゲット要素が格納されます。この属性は DOM API で指定されていますが、すべてのブラウザーで実装されているわけではありません。 jQuery は、このプロパティをどのブラウザでも使用できるように、このイベント オブジェクトに必要な拡張を作成します。 .target を使用すると、最初にイベントを受信した DOM 内の要素 (つまり、実際にクリックされた要素) を特定できます。さらに、これがイベントを処理する DOM 要素を参照していることがわかっているので、次のコードを書くことができます。

$(document).ready(function(){
 $('#switcher').click(function(event){
  $('#switcher .button').toggleClass('hidden');
  })
 })  
$(document).ready(function(){
 $('#switcher').click(function(event){
  if(event.target==this){//判断是否是当前绑定事件的元素元素触发的该事件
  $('#switcher .button').toggleClass('hidden');
  }
  })
 })

この時点のコードでは、クリックされた要素が 1de1e0968f33ca4e1f437b497ef6a3e2 ではないことを確認します。他の子孫要素。ボタンをクリックしてもスタイルコンバーターは折りたたまれなくなりましたが、境界線をクリックすると折りたたみアクションがトリガーされます。ただし、ラベルも子孫要素であるため、ラベルをクリックしても何も起こりません。実際、ここにチェック コードを置くのではなく、ボタンの動作を変更することで目的を達成できます。

以上がJavaScript でのイベントのバブリングを防ぐ 2 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。