恥ずかしながらイベントバブルについて知らなかったので次の記事で学習しました。
イベントバブルとは
あるイベント(クリックしたとか)が発生すると、そのイベントはすべての親要素に通知されます。これがイベントバブルです。
<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 delegationevent.stopPropagation();});
これだけです。楽勝ですね。
なお、超簡便な記法として、
$( "#btn1" ).on( "click", function( event ) {
return false;});
でもよいです。でもこれだとわけが分かりにくいので、推奨されていません。おまけに、event.preventDefault() も一緒に実行した場合と同じ動作になります。preventDefaultというのは、既定のイベント、例えばボタンにsubmit属性が付いてたらページ遷移しちゃうとか、チェックボックスのチェックが変わるとか、そのようなオブジェクトの既定の動作のことです。
ですのでfalseを返すのはあまり好ましくありません。
