親と子のclickイベントが併発しないようにする

親要素とその子要素に対してclickイベントをバインドすると、子要素のclickに親要素のclickも反応してしまい、2重にclickイベントが発生してしまう。

これを回避するには、子要素クリックイベント時にstopPropagationを実行することで後続のイベントを放棄する。

【HTML】
<div id="parent">
    <a href="" id="child">ボタン</a>
</div>

【javascript】
$(document).on('click','#parent',function(){
    alert('親をクリック');
});
$(document).on('click','#child',function(){
    alert('子ををクリック');
})

上記例では#childをクリックすると、alertが2回表示される。

これを回避するには以下のように、stopPropagationメソッドを使う。

【javascript】
$(document).on('click','#parent',function(){
    alert('親をクリック');
});
$(document).on('click','#child',function(e){
    e.stopPropagation();
    alert('子ををクリック');
})

event.stopPropagation()
イベントのバブリングを中止します。
イベントの発生通知は親の要素に伝播していきますが、それを止めてしまうのがこの関数です。