stopPropagationとは
- ここで説明する stopPropagation とは次の語句からなるjQueryのEventObjectメソッドです。
- stop
- 読み: ストップ
意味: 止める - propagation
- 読み: プロパゲーション
意味: 伝播、増殖、宣伝、普及
stopPropagationメソッドの概要
この EventObject メソッドは、イベントが発生したときに、そのイベントのバブリングを止めることができます。
この stopPropagation() は引数を受け付けません。
このメソッドの拡張機能を有するメソッドとして、 stopImmediatePropagation() がありますが、先に stopPropagation() を理解してから、次の理解に進むことをおすすめします。
構文
サンプルを見る前に構文を確認しておきます。
構文は 02 行目の部分です。 02 行目の eo は 01行目の function(eo) の イベントオブジェクトを参照しています。
$(Selector).EventMethod(function(eo){
eo.stopPropagation();
});サンプルコードと実行結果
ここでは、div 要素の click イベントに関数をアタッチしておき、 イベントメソッドを実行した時に生成されるイベントオブジェクトの stopPropagation() メソッドを使った場合と使わなかった場合の動作比較ができるようにしてみました。
これは、イベントのバブリングについての知識がないと分かりづらいかもしれません。 バブリングについて理解できていない方は、 「 バブリングとは 」 のページを参照してください。
サンプルコード: CSS
<style>
div{
background-color: ##white;
border: thin solid ##black;
margin: 1em;
padding: 1em;
}
#idChild_NoneStop, #idChild_ThisStop{
background-color: ##lightblue;
}
</style>
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="idParent">
<div id="idChild_NoneStop"></div>
<div id="idChild_ThisStop"></div>
</div>
<script>...</script>
</body>
- 06-09: div id="idParent" (親要素です。)
- 07: div id="idChild_NoneStop" (子要素です。バブリングを止めていないので、この要素のクリックイベントは親要素のクリックイベントを誘発します。)
- 08: div id="idChild_ThisStop" (子要素です。バブリングを止めていますので、この要素のクリックイベントは親要素のクリックイベントを誘発しません。)
サンプルコード: script
<script>
$("#idParent").click(function(eo){
window.alert(eo.currentTarget.id);
});
$("#idChild_NoneStop").click(function(eo){
window.alert(eo.currentTarget.id);
});
$("#idChild_ThisStop").click(function(eo){
window.alert(eo.currentTarget.id);
eo.stopPropagation();
});
</script>
- 10: eo.stopPropagation() (イベントオブジェクトの stopPropagation メソッドを使ってバブリングを止めています。 この 10 行目の eo は 08 行目の function(eo) を参照しています。)
idParent
idChild_NoneStop
idChild_ThisStop
- idParent: 親要素です。
- idChild_NoneStop: 子要素です。この要素のイベントではバブリングを止めていません。
- idChild_ThisStop: 子要素です。この要素のイベントではバブリングを止めています。
親要素と子要素、全てにクリックイベントをバインドしています。 アタッチした関数の処理は イベントが発生した要素の id 値をダイアログに表示するものです。 親要素や子要素をクリックして動作を確認してみてください。