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

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

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門～モダンスタイルによる基礎から現場での応用まで

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

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();
});

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