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

### :bow: はじめに

これは備忘録です :fire: 

### :love_letter: e.preventDefault

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

例）Anchor タグ

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

### :love_letter: e.stopPropagation

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

イベントフローは

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

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

【蛇足】

* IE8以前はキャプチャーフェーズに対応していません。→ [caniuse](http://caniuse.com/#feat=addeventlistener) 
* jQuery の内部では `addEventListener` でイベントリスナーを追加するとき、 `useCapture` を `false` にして実行しています。つまり、キャプチャーフェーズは使用されません :sunglasses: 
* キャプチャーフェーズはほぼ使わなくても事足りる事が多いです :stuck_out_tongue_winking_eye: 

### :love_letter: return false

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

#### DOM Level 0 の場合

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

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

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

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


#### W3C DOM Level 2 の場合

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

[仕様書](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener) では `EventListener` に戻り値はありません。
ブラウザによって解釈が異なる可能性があります。

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

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

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

該当ソースは[こちら](https://github.com/jquery/jquery/blob/2.2-stable/src/event.js#L327-L330)

### :100: まとめ

実際どうなるのよ :tired_face:
ということで、 [jsfiddle](http://jsfiddle.net/madobon/d3my03cq/) にまとめてみました :musical_note: 

```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;
}
```

### :book: 参考文献

- [DOMイベントのキャプチャ/バブリングを整理する 〜 JSおくのほそ道 #017](http://qiita.com/hosomichi/items/49500fea5fdf43f59c58)