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が絡んでもうちょっとややこしいところだけど,長くなりそうだから逃げたなんてことはない.絶対に.)




2 件のコメント:

  1. Your blogs are great.Are you also searching for shadow health ? we are the best solution for you. We are best known for delivering shadow health assignments.

    返信削除
  2. I appreciate you taking the time and effort to put everything together. If you're reading this, you're in luck since you may hire our company to do your assignment and free yourself of the stress of writing! Thank you for providing this information. Please visit us for Engineering assignment help.

    返信削除