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>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● | ● 10+ | ● 5.1+ | ● | ● 9+ | ● 15+ | ● | ● 4.0+ |
関連記事
- Event.isTrusted
- isTrustedは、Eventのプロパティです。イベントがユーザーの操作により発生したか否かを返します。例えばclickイベントが、ユーザーがクリック操作をして発生した場合はtrue、EventTarget.dispatchEvent()など、スクリプトで発生させた場合はfalseを返します。
- Event.stopPropagation()
- stopPropagation()は、Eventのメソッドです。現在のイベントで、イベントの伝播を終了させます。
- Event.composed
- composedは、Eventのプロパティです。通常のDOMとShadow DOMの間でイベントが伝播するか否かを返します。
- Event.target
- targetは、Eventのプロパティです。イベントの発信源となったオブジェクトを返します。伝播で発生しているイベント内において、元のオブジェクトを確認するのに有用です。