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