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




3 件のコメント:

  1. Your blogs are great.Are you also searching for Nursing Writing Services? we are the best solution for you. We are best known for delivering nursing writing services to students without having to break the bank.whatsapp us:+1-(951)-468-9855

    返信削除
  2. Your blogs are great.Are you also searching for Nursing term paper help? we are the best solution for you. We are best known for delivering great term paper services :+1-(951)-468-9855

    返信削除
  3. 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.

    返信削除