[jQuery] jQuery で特定のイベント処理を無効化・中断する
off, stopPropagation, stopImmediatePropagation, preventDefault
[markdown]
以下のサンプルに対応。
See the Pen jQuery disable and cancelling event by DriftwoodJP (@DriftwoodJP) on CodePen.
## イベント処理を無効化する
> * [.off() | jQuery API Documentation](http://api.jquery.com/off/)
“`javascript
$(セレクタ).off(イベント名, [子セレクタ], [イベントリスナー]);
“`
`on()` したときに名前空間を指定することで、`off()` 時にもそれのみを無効化することができる。
“`javascript
$(“#bar”).on(“click.data_set”,”.foo”,function(){…(中略)…});
$(“#bar”).off(“click.data_set”,”.foo”);
“`
> * [jQueryのoff()を使いこなす – to-R](http://blog.webcreativepark.net/2015/08/01-115625.html)
補足。
> * [.on()と.off()を使いこなす 1 | CodeGrid](https://app.codegrid.net/entry/practical-jquery-1)
### off をコメントインした場合
`#ext` が無効化される。
“`prettyprinted
3 -> Page transition
“`
## イベント処理を中断する
> * [jQuery： イベント処理を中断するには？（preventDefault／stopPropagation／stopImmediatePropagation） – Build Insider](http://www.buildinsider.net/web/jqueryref/022)
| メソッド | バブリング | 別のリスナー | デフォルト動作 |
|———-|:———-:|:———-:|:———-:|
| [event.stopPropagation()](http://api.jquery.com/event.stopPropagation/) | 停止 | – | – |
| [event.stopImmediatePropagation()](http://api.jquery.com/event.stopImmediatePropagation/) | 停止 | 停止 | – |
| [event.preventDefault()](http://api.jquery.com/event.preventDefault/) | – | – | 停止 |
### a), b), c) すべてをコメントアウトした時
イベントバブリングにより、以下の順番でリスナーが動作する。
“`prettyprinted
1 -> 2 -> 3 -> Page transition
“`
> イベントバブリングとは、文書ツリーの下の階層で発生したイベントがそのまま上の階層に伝播する性質のことを言います。イベントが上にさかのぼっていく様子を泡（bubble）になぞらえて、このように呼ぶのです。
### a) stopPropagation をコメントインした場合
伝達を止めるので、`#ext` 内で伝達が止まる。
上位の `#outer` には伝達せずに 3 がスキップされる。
“`prettyprinted
1 -> 2 -> Page transition
“`
### b) stopImmediatePropagation をコメントインした場合
即座に伝達を止めるので、以降 `#ext` 内の 2, 上位 `#outer` の 3 のイベントが止まる。
ディフォルト動作は発生する。
“`prettyprinted
1 -> Page transition
“`
### c) preventDefault をコメントインした場合
ディフォルト動作を妨げるので、この場合は page transition しなくなる。
“`prettyprinted
1 -> 2 -> 3
“`
翔泳社
売り上げランキング: 298,912
[/markdown]