SYNCERのロゴ
アイキャッチ画像

Event.stopImmediatePropagation() - 他のリスナーを実行しない

stopImmediatePropagation()は、Eventのメソッドです。同じオブジェクトの同じイベントに複数のリスナーが設定されている場合、このメソッドを実行すると、その時点で他のリスナーを実行しません。

概要

名前
stopImmediatePropagation
所属
Event
IDL
void stopImmediatePropagation();
仕様書
https://dom.spec.whatwg.org/#dom-event-stopimmediatepropagation

説明

引数はありません。返り値もありません。

チュートリアル

同じオブジェクトの同じイベントに複数のリスナーを登録した場合、イベント発生時、登録した順にリスナーが実行されます。

element.addEventListener( "click", callbackFn1 ) ;
element.addEventListener( "click", callbackFn2 ) ;
element.addEventListener( "click", callbackFn3 ) ;
element.addEventListener( "click", callbackFn4 ) ;
element.addEventListener( "click", callbackFn5 ) ;

// callbackFn1 → callbackFn2 → callbackFn3 → callbackFn4 → callbackFn5

例えば、callbackFn3内でstopImmediatePropagation()を実行した場合、そこでリスナーの伝播が終了し、その後のリスナーが実行されません。

var callbackFn3 = function ( event ) {
	event.stopImmediatePropagation() ;
}

// callbackFn1 → callbackFn2 → callbackFn3 (終了) → callbackFn4 (実行されない) → callbackFn5 (実行されない)

デモ

Event.stopImmediatePropagation()のデモです。button要素のclickイベントに、3種類のリスナーを設定しました。2つ目のリスナー内でメソッドを実行するため、その後に予定されているcallbackFn3が実行されません。コメントアウトをしてメソッドを実行しないパターンも試してみて下さい。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
div#result {
	white-space: pre-wrap ;
}
</style>
</head>
<body>
	<p><button id="run">実行</button></p>
	<p><button id="clear">削除</button></p>
<hr>
<div id="result"></div>
<script>
/** try it! **/
var element = document.getElementById( "run" ) ;

var callbackFn1 =  function ( event ) {
	resultElement.appendChild( new Text( "リスナー1を実行\n→\n" ) ) ;
} ;

var callbackFn2 =  function ( event ) {
	event.stopImmediatePropagation() ;	// コメントアウトをしてみよう
	resultElement.appendChild( new Text( "リスナー2を実行\n→\n" ) ) ;
} ;

var callbackFn3 =  function ( event ) {
	resultElement.appendChild( new Text( "リスナー3を実行\n→\n" ) ) ;
} ;

element.addEventListener( "click", callbackFn1 ) ;
element.addEventListener( "click", callbackFn2 ) ;
element.addEventListener( "click", callbackFn3 ) ;
/** try it! **/

var resultElement = document.getElementById( "result" ) ;

document.getElementById( "clear" ).onclick = function ( event ) {
	event.stopPropagation() ;
	resultElement.innerHTML = "" ;
}
</script>
</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
10+ 5.1+ 9+ 15+ 4.0+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月8日 (日)
コンテンツを公開しました。