jQuery のイベントのバブリング (伝播) については下記のサイトがほんとに分かりやすくて、読んでいただければもうあらためて書くことはないのですが、
jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」について (ふじこのプログラミング奮闘記
3行でまとめると、
- クリックなどのイベントは、子要素から親要素へと伝播される（バブリング）
- preventDefault() は、その要素のイベントをキャンセルし、stopPropagation()は、親要素への伝播をキャンセルする。
- return false; を使うと、その要素のイベントも親要素への伝播も両方キャンセルする。
という感じです。
で、実際の使いどころといいますか、使用例をサンプルでご紹介したいと思います。
サンプル A
http://tam-matsuo.github.io/jquery-event/
- ボタンをクリックすると、全画面でモーダルウィンドウ的なものが開きます。
- 背景の div要素の子として、ウィンドウや閉じるボタンが配置されています。
- ウィンドウには別サイトへのリンクボタンと、閉じるボタンがあります。
- 背景をクリックすると、モーダルウィンドウは閉じられます。
このサンプルA では preventDefault() や stopPropagation() を使っているのですが、ではもし使わないとどうなるか？ というのを先に見ていただくと分かりやすいかも。
↓使わない場合の例、サンプルB はこちらです。
サンプル B (不具合あり)
http://tam-matsuo.github.io/jquery-event/index-b.html
コードはこれだけ。
ウインドウを表示したあと、背景をクリックするとウィンドウは閉じられます。
でも困ったことに、ウィンドウの中身（白い部分）をクリックしてもウィンドウが閉じられてしまいます。外部サイトへのリンクボタンも有効になりません。
つまり、「背景をクリックすると閉じる」という設定が、背景の子要素をクリックしたときも効いてしまうんですね。子から親に、イベントは伝播するから。
では、HTMLを組み替えて、背景とウィンドウ本体を親子関係にならないようにするか？
その方法でも解決できますが、preventDefault() や stopPropagation() を使ってイベントの伝播を制御してやれば、親子関係のままでもうまくいきます。
ということで、先のサンプルA のコードはこんな感じ。
ウィンドウ本体をクリックした際は、親(背景)への伝播をやめる。
閉じるボタンをクリックした際は、親(背景)へ伝播する。
という処理を入れました。
これで、背景の子要素がクリックされたときの処理を制御できています。
以上、イベントのバブリングに関する preventDefault() / stopPropagation() の使用例でした。