本記事では、JavaScriptで親要素・祖先要素のイベントを実行させないようにする方法について解説しています。
ITエンジニア特化の転職サイト!
自社内開発求人に強い【クラウドリンク】
JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
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();
});
今度は子要素の背景色のみが赤色になっていることが確認できます。