[jQuery] jQuery で特定のイベント処理を無効化・中断する

off, stopPropagation, stopImmediatePropagation, preventDefault

以下のサンプルに対応。

See the Pen jQuery disable and cancelling event by DriftwoodJP (@DriftwoodJP) on CodePen.

イベント処理を無効化する

$(セレクタ).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対応
山田 祥寛
翔泳社
売り上げランキング: 298,912