六帖のかたすみ

DVを受けていた男性。家を脱出して二周目の人生を生きています。自閉症スペクトラム(受動型)です。http://rokujo.org/ に引っ越しました。

jQuery: イベントバブルをストップ

プログラミング

恥ずかしながらイベントバブルについて知らなかったので次の記事で学習しました。

 

learn.jquery.com

イベントバブルとは

あるイベント(クリックしたとか)が発生すると、そのイベントはすべての親要素に通知されます。これがイベントバブルです。

<body onclick="alert('BODYがクリックされました')">
<div onclick="alert('DIVがクリックされました')">
  <p onclick="alert('Pがクリックされました')">例：
    <span onclick="alert('SPANがクリックされました')">
      <button id="btn1" onclick="alert('BUTTONがクリックされました')">
        ここをクリックしてください
</button></span></p></div>

上のコードを実行すると、ボタンを押したときBUTTON→SPAN→P→DIV→BODYの順ですべてのメッセージボックスが出ます。

バブルを止める

イベントバブルがうっとおしいので、jQueryを使って

event.stopPropagation();

を入れることで、バブルを止めることができます。

$( "#btn1" ).on( "click", function( event ) {
 // Prevent event from bubbling up DOM tree, prohibiting delegation
event.stopPropagation();
});

これだけです。楽勝ですね。

 

なお、超簡便な記法として、

$( "#btn1" ).on( "click", function( event ) {
return false;
});

でもよいです。でもこれだとわけが分かりにくいので、推奨されていません。おまけに、event.preventDefault() も一緒に実行した場合と同じ動作になります。preventDefaultというのは、既定のイベント、例えばボタンにsubmit属性が付いてたらページ遷移しちゃうとか、チェックボックスのチェックが変わるとか、そのようなオブジェクトの既定の動作のことです。

ですのでfalseを返すのはあまり好ましくありません。