JavaScript | 親要素のイベントを実行しないようにする方法

2022-02-06JavaScript イベント,JavaScript

Javascriptで要素にaddEventListener()で指定したイベントで、その子要素上でのアクション時（クリックなど）ではイベントを実行しないようにする方法を紹介しています。

親要素のイベントを実行しないようにする実装サンプル

addEventListener()で親要素のイベントを実行しないようにした実装サンプルとサンプルコードになります。

例えば要素にクリックイベントを実装した場合、デフォルトでは、イベントを指定した要素の子要素の上でクリックイベントが発生する状態となっています。

子要素の上では各イベントを発生させないようにする方法となります。

イベントが登録された要素と発生した要素を比較する方法

See the Pen JavaScript | Get the event type by yochans (@yochans) on CodePen.

HTMLには親要素をclass名「.parent」、子要素としてclass名「.child」を<div>タグで設置しています。

<div class="parent">
	<div class="child"></div>
</div>

子要素ではその親要素に登録されているイベント処理を実行させない簡単な方法は、イベントが発生した要素（クリックされた要素）がイベントを登録した要素と一致するかどうか判別する方法になります。

document.querySelector(`.parent`).addEventListener(`click`, () => {
	if (event.target == event.currentTarget) {
		event.currentTarget.style.background = "#000080";
	}
});

stopPropagation()メゾッドを使う方法

他の方法としてstopPropagation()メゾッドを使った方法を紹介しています。

stopPropagation()メゾッドを使う場合は、子要素にも同じ条件で発火するイベントを登録する必要がありますが、その親要素のイベント発生を制御することが可能となります。

See the Pen JavaScript | Do not execute the event of the parent element 01 by yochans (@yochans) on CodePen.

HTMLには親要素をclass名「.parent」、子要素としてclass名「.child」を<div>タグで設置しています。

<div class="parent">
	<div class="child"></div>
</div>

stopPropagation()メゾッドを子要素のイベントに対して記述しておくことで、それ以上の伝播するイベントの実行を制御します。

document.querySelector(`.parent`).addEventListener(`click`, () => {
	event.currentTarget.style.background = "#000080";
});

document.querySelector(`.child`).addEventListener(`click`, () => {
	event.stopPropagation();
});