JavaScript イベントの停止とバブリングについて

JavaScript イベントの停止とバブリングについて

バブリングとは？

伝播のこと。
子から親へ流れていく感じを想像してもらうといいかも。
ツリー構造の下から上に流れていく感じ。

メソッド

preventDefault()

自身の持つイベントを停止するが、親要素のもつイベントは発動させる。
親へのバブリングは行なうということ。

stopPropagation()

自身の持つイベントは実行するが、親要素のもつイベントは停止させる。
親へのバブリングを行なわないということ。

return false

自身の持つイベントも伝播も停止する。

例

<h2>バブリングテスト</h2>
<button class="open">モーダル開く</button>
<div id="modalTop">
    <div id="modalBody">
        <p>外側をクリックするか、閉じるボタンをクリックするとモーダルが閉じるよ</p>
    </div>
    <button class="close">閉じる</button>
</div>

$(function() {
    var $modal = $('#modalTop');

    // fadeIn 念のため return false
    $('.open').click(function() {
        $modal.fadeIn();
        return false;
    });

    // 自身のイベントを止めるが、親要素の $modalのclickイベントは発動させる
    $('.close').click(function(event) {
        event.preventDefault();
    });

    // 親要素の $modalの clickイベントを止める。
    $('#modalBody').click(function(event) {
        event.stopPropagation();
    });

    // fadeOut 念のため return false
    $($modal).click(function() {
        $modal.fadeOut();
        return false;
    });
});

サンプル

ついでに、下記は失敗例。
preventDefault と stopPropagation を使用しないだけ。

$(function() {
    var $modal = $('#modalTop');
    $('.open').click(function() {
        $modal.fadeIn();
        return false;
    });
    $($modal).click(function() {
        $modal.fadeOut();
        return false;
    });
});

サンプル
モーダル本文のところをクリックしても、モーダルウィンドウが閉じてしまう。

※参考※
Tips Note by TAM
ふじこのプログラミング奮闘記