isPropagationStoppedとは
- ここで説明する isPropagationStopped とは次の語句からなるjQueryのEventObjectメソッドです。
- is
- 読み: イズ
意味: 「～です」の疑問形、ですか - propagation
- 読み: プロパゲーション
意味: 伝播、増殖、宣伝、普及 - stopped
- 読み: ストップド
意味: 「止める」の過去形
isPropagationStoppedメソッドの概要
この EventObject メソッドは、 EO.stopPropagation() によってイベントのバブリングを停止したか否かを調べることができます。
このメソッドの戻り値は 真偽値です。 バブリングを停止している場合は true を返し、停止していない場合は false を返します。
この isPropagationStopped() は引数を受け付けません。
このメソッドを理解するためには先に、 stopPropagation() のページを一読することをおすすめします。
構文
サンプルを見る前に構文を確認しておきます。
構文は 02 行目の部分です。 02 行目の eo は 01行目の function(eo) の イベントオブジェクトを参照しています。
$(Selector).EventMethod(function(eo){
eo.isPropagationStopped();
});サンプルコードと実行結果
ここでは、div 要素の click イベントに関数をアタッチしておき、 イベントメソッドを実行した時に生成されるイベントオブジェクトの stopPropagation() メソッドを使った場合と使わなかった場合の動作比較ができるようにしてみました。 また、isPropagationStopped() を使って 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 + "\n" + eo.isPropagationStopped());
});
$("#idChild_ThisStop").click(function(eo){
eo.stopPropagation();
window.alert(eo.currentTarget.id + "\n" + eo.isPropagationStopped());
});
</script>
- 09: eo.stopPropagation() (イベントオブジェクトの stopPropagation メソッドを使ってバブリングを止めています。 この 09 行目の eo は 08 行目の function(eo) を参照しています。)
- 10: eo.isPropagationStopped() (イベントオブジェクトの isPropagationStopped メソッドを使って stopPropagation が実行されているかを判定します。 ここでは 09 行目で stopPropagation を使っているので true を返します。
- idParent: 親要素です。
- idChild_NoneStop: 子要素です。この要素のイベントではバブリングを止めていません。
- idChild_ThisStop: 子要素です。この要素のイベントではバブリングを止めています。
親要素と子要素、全てにクリックイベントをバインドしています。 アタッチした関数の処理は イベントが発生した要素の id 値をダイアログに表示するものです。 親要素や子要素をクリックして動作を確認してみてください。