ywork2020.com

Title

stopImmediatePropagationを利用したか否かを調べる

目次 (INDEX)

isImmediatePropagationStoppedとは

ここで説明する isImmediatePropagationStopped とは次の語句からなるjQueryのEventObjectメソッドです。
is
読み: イズ
意味: 「~です」の疑問形、ですか
immediate
読み: イミディエイト
意味: 即座、即時
propagation
読み: プロパゲーション
意味: 伝播、増殖、宣伝、普及
stopped
読み: ストップド
意味: 「止める」の過去形

目次に戻る

isImmediatePropagationStoppedメソッドの概要

単純にいうと、この EventObject メソッドは、 stopImmediatePropagation() 、 または stopPropagation() を利用しているか否かを調べることができます。 戻り値は true か false です。

stopImmediatePropagation() はイベントが発生したときに、そのイベントのバブリングを止め、 更に現行のイベントと同じ種類のイベントの発生を止めることができます。

また、stopPropagation() は そのイベントのバブリングのみを止めることができます。

前記したとおり、この isImmediatePropagationStopped() は 2つのメソッドの適用をしているか否かを判別できる訳ですが、 このメソッドを使う場合は stopImmediatePropagation() を適用したか否かを調べることに利用することをおすすめします。

なぜなら、stopPropagation() の適用は isPropagationStopped() で調べることができるからです。

stopImmediatePropagation() は、 stopPropagation() の機能を拡張したものと言えます。

なお、上記のメソッドらは、イベントのバブリングについての知識がないと分かりづらいかもしれません。 バブリングについて理解できていない方は、先に 「 バブリングとは 」 のページを一読することをおすすめします。

isImmediatePropagationStopped() は引数を受け付けません。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

構文は 02 行目の部分です。 02 行目の eo は 01行目の function(eo) の イベントオブジェクトを参照しています。

$(Selector).EventMethod(function(eo){
	eo.isImmediatePropagationStopped();
});

目次に戻る

サンプルコードと実行結果

ここでは、div 要素の click イベントに関数をアタッチしておき、 イベントメソッドを実行した時に生成されるイベントオブジェクトの stopImmediatePropagation() メソッドを使った場合と使わなかった場合の動作比較ができるようにしてみました。 また、isImmediatePropagationStopped() を使って stopImmediatePropagation() が実行されているかを判定して表示するようにしています。

これは、イベントのバブリングについての知識がないと分かりづらいかもしれません。 バブリングについて理解できていない方は、 「 バブリングとは 」 のページを参照してください。

サンプルコード: 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 + "\n" + eo.isImmediatePropagationStopped());
	});
	$("#idChild_NoneStop").click(function(eo){
		window.alert(eo.currentTarget.id + "\n" + eo.isImmediatePropagationStopped());
	});
	$("#idChild_NoneStop").click(function(){
		$("#idParent").prepend("*");
		$(this).prepend("*");
	});
	$("#idChild_ThisStop").click(function(eo){
		eo.stopImmediatePropagation();
		window.alert(eo.currentTarget.id + "\n" + eo.isImmediatePropagationStopped());
	});
	$("#idChild_ThisStop").click(function(){
		$("#idParent").prepend("*");
		$(this).prepend("*");
	});
</script>
  • 13: eo.stopImmediatePropagation() (イベントオブジェクトの stopImmediatePropagation メソッドを使ってバブリングを止めています。 また、 stopImmediatePropagation メソッドは 16-19行目 のクリックイベントも停止することになります。 この 13 行目の eo は 12 行目の function(eo) を参照しています。)
  • 14: eo.isImmediatePropagationStopped() (このメソッドで stopImmediatePropagation() の適用を判別しています。 結果はアラートダイアログに表示されます。 他の要素との比較の為に、この行と同じコードの部分が 03 , 06 行目にあります。)
実行結果:
idParent
idChild_NoneStop
idChild_ThisStop
  • idParent: 親要素です。
  • idChild_NoneStop: 子要素です。この要素のクリックイベントではバブリングを止めていません。
  • idChild_ThisStop: 子要素です。この要素のクリックイベントではバブリングを止め、かつ、他のクリックイベントも停止するようにしています。

親要素と子要素、全てにクリックイベントをバインドしています。 しかも、子要素には それぞれに2つのクリックイベントをバインドしています。 いわゆる、これがクリックイベントの「多重バインド」です。

子要素にアタッチした 1つめの関数の処理は イベントが発生した要素の id 値をダイアログに表示するものです。 また、2つめの関数の処理は その要素内に「*」マークを追加するものです。 親要素や子要素をクリックして動作を確認してみてください。

動作結果をみると、 #idChild_NoneStop の要素はクリックする度に 「*」マークが追加されていきます。 また、 #idChild_ThisStop の要素はクリックしても 「*」マークが追加されません。 つまり、 #idChild_ThisStop の要素は クリックイベント自体が停止していることが分かります。

目次に戻る