【JavaScript】親要素・祖先要素のイベントを実行させない方法

2022年6月6日2023年7月9日

本記事では、JavaScriptで親要素・祖先要素のイベントを実行させないようにする方法について解説しています。

JavaScriptの学習におすすめ書籍

1冊ですべて身につくJavaScript入門講座

総合評価

( 5 )

メリット

楽天ブックス

¥2,794 （2025/01/12 17:00時点 | 楽天市場調べ）

ポチップ

先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！

全プログラマー必見！
変数名/関数名にもう悩まない！

リーダブルコード

総合評価

( 5 )

メリット

著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤功平, 翻訳:角征典

¥2,640 （2023/07/23 02:48時点 | Amazon調べ）

ポチップ

stopPropagationの使い方

JavaScriptでは、イベントが実行されると対象要素から親要素→祖先要素へ伝搬されます。これはバブリングと呼ばれイベントが伝搬する流れのことを指します。

まずは、バブリングがどのような状況で発生するかをサンプルコードで確認してみましょう。

<div id="ancestor">
  祖先要素
  <div id="parent">
    親要素
    <div id="child">
      子要素
    </div>
  </div>
</div>

div{
  padding:30px;
  border:2px solid #000;
}

$("div").on("click",function(){
  $(this).css("background", "#f00");
});

子要素のブロックをクリックしたのに、親要素・祖先要素までクリックイベントが実行され背景色が赤色になっていることが確認できます。

このバブリングを停止させるには、stopPropagationメソッドを使います。

$("要素").on("イベント",function(event){
  event.stopPropagation();
});

stopPropagationは、イベント登録時の引数で使うことができるメソッドです。

上記のサンプルコードにstopPropagationメソッドを使ってパブリングを止めてみましょう。

$("div").on("click",function(event){
  $(this).css("background", "#f00");
  event.stopPropagation();
});

今度は子要素の背景色のみが赤色になっていることが確認できます。

よかったらシェアしてね！