ywork2020.com

Title

現行イベントのバブリングを止めて更に同種のイベントのハンドラーも止める

目次 (INDEX)

stopImmediatePropagationとは

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

目次に戻る

stopImmediatePropagationメソッドの概要

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

これを、単純に言ってしまうと、1つの要素に対しての 「 イベントのバブリングを停止すると共に、イベントの多重バインドによりアタッチされた関数の実行も停止できる 」ということになります。

このメソッドは、 stopPropagation() の機能を拡張したものと言えます。 これは、単純にイベントのバブリングを停止するために用いられますが、 stopImmediatePropagation() は更に強力です。 stopPropagation() を理解できていない方は、先にそちらを理解することをおすすめします。

なお、 stopImmediatePropagation() は引数を受け付けません。

目次に戻る

構文

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

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

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

目次に戻る

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

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

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

また、この stopImmediatePropagation() は、 stopPropagation() の拡張機能を有しているので、 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_NoneStop").click(function(){
		$("#idParent").prepend("*");
		$(this).prepend("*");
	});
	$("#idChild_ThisStop").click(function(eo){
		window.alert(eo.currentTarget.id);
		eo.stopImmediatePropagation();
	});
	$("#idChild_ThisStop").click(function(){
		$("#idParent").prepend("*");
		$(this).prepend("*");
	});
</script>
  • 14: eo.stopImmediatePropagation() (イベントオブジェクトの stopImmediatePropagation メソッドを使ってバブリングを止めています。 また、 stopImmediatePropagation メソッドは 16-19行目 のクリックイベントも停止することになります。 この 14 行目の eo は 12 行目の function(eo) を参照しています。)
実行結果:
idParent
idChild_NoneStop
idChild_ThisStop
  • idParent: 親要素です。
  • idChild_NoneStop: 子要素です。この要素のクリックイベントではバブリングを止めていません。
  • idChild_ThisStop: 子要素です。この要素のクリックイベントではバブリングを止め、かつ、他のクリックイベントも停止するようにしています。

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

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

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

目次に戻る