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

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

ITエンジニア特化の転職サイト！
自社内開発求人に強い【クラウドリンク】

先輩くん

年収、休日数、労働環境等クラウドリンクが審査し、これらを通過した優良求人情報のみ紹介しているよ！

後輩ちゃん

100％自社内開発の求人だから、SESのように職場環境が変わらないのがいいね！

簡単30秒で無料登録！

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

本書情報

著者	山田 祥寛
発売日	2016/9/30
ページ数	782ページ
Kindle版	○
レビュー (Amazon)	(146件)

ＪａｖａＳｃｒｉｐｔ本格入門 モダンスタイルによる基礎から現場での応用まで 改訂新版/技術評論社/山田祥寛

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

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

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