jQuery_jqueryでバブリングイベントを防ぐ方法の紹介

1. バブリングイベントの紹介

コントロールをクリックしたときに、このコントロールを含む親コントロールにもクリック イベントがある場合、実行は続行されます。
例: div の下の a にはクリックイベントがあり、a をクリックするとアラートが 2 回表示されます。この現象をバブリングイベントといいます。

このイベントは、元の要素から DOM ツリーの最上部までバブルアップします。
ターゲット要素: イベントのターゲット要素は最初の要素であり、この例ではボタン
であり、要素オブジェクトの属性として表示されます。イベント プロキシを使用すると、要素にイベント ハンドラーを追加し、イベントがその子要素からバブルアップするのを
待つことができ、イベントがどの要素から開始されるかを簡単に知ることができます。
注:
ブラー、フォーカス、ロード、アンロードは、他のイベントのようにバブルできません。実際、ブラーとフォーカスは、イベント バブリングではなくイベント キャプチャを使用して取得できます (IE 以外のブラウザーの場合)。

2. jQuery イベントのバブリングを防ぐ

jQuery には、DOM イベントをトリガーするためのバブリング機能があります。この機能を利用するとコードの重複を減らすことができる場合もありますが、イベントがバブルアップしたくない場合もあります。このとき、jQuery.Eventがバブリングしないようにする必要があります。

jQuery.Event ドキュメントの冒頭で、jQuery.Event オブジェクトが W3C 標準に準拠するイベント オブジェクトであることを学びました。同時に、jQuery.Event によって IE との互換性をチェックする必要がなくなります。
jQuery.Event は、イベントのバブリングを停止する非常に簡単な方法を提供します。event.stopPropagation();

コードをコピーコードは次のとおりです:

$("p").click(function(event){
event.stopPropagation();
// 何かを行います
})

しかし、このメソッドはライブを使用してバインドされたイベントには影響しません。イベントのバブリングを防ぐには、より単純なメソッドが必要です: return false;

コードをコピー コードは次のとおりです:

$(this).after("別の段落!");

false を返す });

複数のブラウザ終了バブリング関数と互換性があります:

コードをコピー コードは次のとおりです:

function stopDefault(e) {
//デフォルトのブラウザアクションをブロックします (W3C)
if (e && e.preventDefault)
ブラウザのデフォルトのアクションメソッド
else
ウィンドウ.event.returnValue = false;
return false;
}

3.event.tatget 属性を使用してイベント オブジェクト を明確にします

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

event.tatget 属性を使用してイベント オブジェクトを明確にします

イベントのバブリングを防ぐコードは次のとおりです:

コードをコピーします コードは次のとおりです:

$ (document).ready(function() {
$('switcher').click(function(event){
if(event.target == this)
{
$('switcher .button').toggleClass('hidden');
}
};)
});