[jQuery] jQuery で特定のイベント処理を無効化・中断する
off, stopPropagation, stopImmediatePropagation, preventDefault
以下のサンプルに対応。
See the Pen jQuery disable and cancelling event by DriftwoodJP (@DriftwoodJP) on CodePen.
Contents
イベント処理を無効化する
$(セレクタ).off(イベント名, [子セレクタ], [イベントリスナー]);
on() したときに名前空間を指定することで、off() 時にもそれのみを無効化することができる。
$("#bar").on("click.data_set",".foo",function(){...(中略)...});
$("#bar").off("click.data_set",".foo");
補足。
off をコメントインした場合
#ext が無効化される。
3 -> Page transition
イベント処理を中断する
| メソッド | バブリング | 別のリスナー | デフォルト動作 |
|---|---|---|---|
| event.stopPropagation() | 停止 | – | – |
| event.stopImmediatePropagation() | 停止 | 停止 | – |
| event.preventDefault() | – | – | 停止 |
a), b), c) すべてをコメントアウトした時
イベントバブリングにより、以下の順番でリスナーが動作する。
1 -> 2 -> 3 -> Page transition
イベントバブリングとは、文書ツリーの下の階層で発生したイベントがそのまま上の階層に伝播する性質のことを言います。イベントが上にさかのぼっていく様子を泡（bubble）になぞらえて、このように呼ぶのです。
a) stopPropagation をコメントインした場合
伝達を止めるので、#ext 内で伝達が止まる。
上位の #outer には伝達せずに 3 がスキップされる。
1 -> 2 -> Page transition
b) stopImmediatePropagation をコメントインした場合
即座に伝達を止めるので、以降 #ext 内の 2, 上位 #outer の 3 のイベントが止まる。
ディフォルト動作は発生する。
1 -> Page transition
c) preventDefault をコメントインした場合
ディフォルト動作を妨げるので、この場合は page transition しなくなる。
1 -> 2 -> 3
JavaScript逆引きレシピ jQuery対応
posted with amazlet at 16.07.22
山田 祥寛
翔泳社
売り上げランキング: 298,912
翔泳社
売り上げランキング: 298,912