[JavaScript] e.preventDefault とか e.stopPropagation とか return false

はじめに

これは備忘録です

e.preventDefault

デフォルトアクションを抑止します

例）Anchor タグ

<a href="#"></a>

通常、アンカーをクリックすると href で指定したリンク先に飛びますが
e.preventDefault でデフォルトアクションを抑止すると、飛ばなくなります。

e.stopPropagation

イベントの伝播を中断します

イベントフローは

1. キャプチャーフェーズ
2. ターゲットフェーズ
3. バブリングフェーズ

の順で実行されますが、途中でイベントの伝播を抑止することができます

【蛇足】

• IE8以前はキャプチャーフェーズに対応していません。→ caniuse
• jQuery の内部では addEventListener でイベントリスナーを追加するとき、 useCapture を false にして実行しています。つまり、キャプチャーフェーズは使用されません
• キャプチャーフェーズはほぼ使わなくても事足りる事が多いです

return false

jQuery の使用有無などにより異なります。

DOM Level 0 の場合

デフォルトアクションを抑止します

<input type="button" onclick="func(); return false;">

document.getElementById("button").onclick = function() {
    return false;
};

※ "DOM Level 0" は W3C が DOM の標準化を始める前にブラウザ間で共通だったオブジェクトモデルです。

W3C DOM Level 2 の場合

e.preventDefault / e.stopPropagation を適宜呼びましょう。

仕様書 では EventListener に戻り値はありません。
ブラウザによって解釈が異なる可能性があります。

document.getElementById("button").addEventListener("click", function(e) {
  // return false;
  e.preventDefault();
  e.stopPropagation();
}, false);

jQuery Events の場合

イベントの伝播を中断し、デフォルトアクションを抑止します
e.preventDefault と e.stopPropagation を両方実行した場合と同じです

$(#button).on('click', function(e){
  return false;
});

該当ソースはこちら

まとめ

実際どうなるのよ
ということで、 jsfiddle にまとめてみました

index.html

<p>Default</p>
<div id="a3" class="box size3">
    <div id="a2" class="box size2">
        <div id="a1" class="box size1"> <a id="a0" class="anchor" href="#jump">Link</a>

        </div>
    </div>
</div>
<p>e.stopPropagation()</p>
<div id="b3" class="box size3">
    <div id="b2" class="box size2">
        <div id="b1" class="box size1"> <a id="b0" class="anchor" href="#jump">Link</a>

        </div>
    </div>
</div>
<p>e.preventDefault()</p>
<div id="c3" class="box size3">
    <div id="c2" class="box size2">
        <div id="c1" class="box size1"> <a id="c0" class="anchor" href="#jump">Link</a>

        </div>
    </div>
</div>
<p>return false</p>
<div id="d3" class="box size3">
    <div id="d2" class="box size2">
        <div id="d1" class="box size1"> <a id="d0" class="anchor" href="#jump">Link</a>

        </div>
    </div>
</div>
<p>e.stopPropagation() と e.preventDefault()</p>
<div id="e3" class="box size3">
    <div id="e2" class="box size2">
        <div id="e1" class="box size1"> <a id="e0" class="anchor" href="#jump">Link</a>

        </div>
    </div>
</div>
<div id="jump">jumped!!</div>

index.js

$(function () {

    $(".anchor,.box").click(function (e) {
        alert(this.id);
    });

    $("#b2").click(function (e) {
        // 伝播をキャンセルする
        alert(this.id + " e.stopPropagation()");
        e.stopPropagation();
    });

    $("#c2").click(function (e) {
        // デフォルトアクションをキャンセル
        alert(this.id + " e.preventDefault()");
        e.preventDefault();
    });

    $("#d2").click(function (e) {
        // デフォルトアクションと伝播を両方キャンセルする
        alert(this.id + " return false;");
        return false;
    });

    $("#e2").click(function (e) {
        // デフォルトアクションと伝播を両方キャンセルする
        alert(this.id + " e.stopPropagation() & e.preventDefault()");
        e.stopPropagation();
        e.preventDefault();
    });
});

style.css

#jump {
    margin-top: 600px;
}
.box {
    border-style: solid;
    border-width: 1px;
    display: block;
}
.size3 {
    width: 300px;
    height: 300px;
    background-color: green;
}
.size2 {
    width: 200px;
    height: 200px;
    background-color: blue;
}
.size1 {
    width: 100px;
    height: 100px;
    background-color: red;
}

参考文献

• DOMイベントのキャプチャ/バブリングを整理する 〜 JSおくのほそ道 #017