「イラッ」としたので今日はボイコットするつもりだったんですけど,
岩見君に「それはアカンやろ!」って言われたので遅ればせながら書きました.
jQueryのイベントのバブリングについて
タイトルではjQueryとありますが,イベントバブリングはJavaScript共通です.
イベントのバブリングとはつまり,イベントの伝達のことを指します.
まずは下記の青いオブジェクトをクリックしてください(alertが3回表示されるかと思います)
ちなみに三色は親子孫関係にあります.
青から緑へ,緑から赤へ,イベントが伝わりました.
ではここで,青オブジェクトのon('click')関数の最後に「return false」を入れてみます.
今回は青のみが表示されました.
「return false」はイベントのバブリングを完全に止めてしまいます.
疑り深い人は,緑オブジェクトをクリックしてみてください.
緑から赤へはしっかりとイベントのバブリングが発生します.
<a>タグでhrefのリンクを無効化する際によく使われますね.
「e.stopPropagation」と「e.preventDefault」
ごちゃごちゃ説明するのも……なので、
「return false」は「e.stopPropagation」と「e.preventDefault」を同時に呼んだ効果があります.
「e.stopPropagation」+「e.preventDefault」=「return false」です。
先ほどの<a>タグで説明すると,「e.stopPropagation」は親要素へのバブリングを止める効果はありますが,自身のhrefを止める効果はありません.
反対に「e.preventDefault」は親要素へのバブリングを止める効果はありませんが,自身のhrefを止める効果があります.
同時に使用することで「return false」と同じ,イベントのバブリングを完全に止める効果があります.
<a>タグは入っていませんが、下記は「e.stopPropagation」で親要素へのバブリングを止めたものです.
jQuery UIを駆使してCMSを作っていたときにつまずいた部分です.
(本当はjQuery UIが絡んでもうちょっとややこしいところだけど,長くなりそうだから逃げたなんてことはない.絶対に.)
0 件のコメント:
コメントを投稿