2012年12月11日火曜日

jQueryのイベントのバブリングについて

何か,管理者権限持ってる人に記事消されて,
「イラッ」としたので今日はボイコットするつもりだったんですけど,
岩見君に「それはアカンやろ!」って言われたので遅ればせながら書きました.


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 件のコメント:

コメントを投稿