JavaScript でイベント伝播の止め方いろいろ
JavaScript でイベント伝播の止め方いろいろ
- event.preeventDefault()
- event.stopPropagation()
- jQuery.bind("…", function(){reutnr false;})
等の細かい挙動を確認.
結果
jQuery.bind
| parent | link | bind2 | |
|---|---|---|---|
| 指定なし | ○ | ○ | ○ |
| e.preventDefault() | ○ | × | ○ |
| e.stopPropagation() | × | ○ | ○ |
| return false; | × | × | ○ |
element.onclick
| parent | link | |
|---|---|---|
| 指定なし | ○ | ○ |
| e.preventDefault() | ○ | × |
| e.stopPropagation() | × | ○ |
| return false; | ○ | × |
まとめ
- preeventDefault() はブラウザのデフォルトの挙動をキャンセルする.
- stopPropgation() は親要素へのイベント伝播を止める.
- return false; の挙動は jQuery と onclick で変わるので注意
- jQueryで、同じ要素に複数のリスナを bind した場合は、両方動く
( 止めたかったら独自のフラグを持たせるか、unbind する )
深く考えない時は、jQuery + return false; だけで書いておけば良さそうでしょうか？
検証コード
※ 検証時は、コメントアウトしながら切り替えてます。
