バブリング(伝達) jQuery

バブリングとは【イベントの伝達】という意味です

###バブリングを制御するための3つのメソッド

① stopPropagation() ＝　親要素への伝播をキャンセル
② preventDefault() ＝ その要素のイベントをキャンセル
③ return false; ＝ 親要素への伝播をキャンセルし、その要素のイベントもキャンセル

#① stopPropagation()
sectionがクリックされたときは【 sectionにclass="select" 】をつけるが
section内のliをクリックした場合は【 liにclass="select" 】をつけて【 sectionにはclass="select" 】をつけないという処理

こういった実装の場合に【stopPropagation()】を使います。

HTML

<section>
     <div>
        <ul>
            <li>クリック</li>
        </ul>
     </div>
</section>

jquery

$('section').click(function(){
   $(this).addClass('select');
});

$('li').click(function(e){
   $(this).addClass('select');
   e.stopPropagation();
});

sectionの領域の中にliが含まれているため、liをクリックしたときliのクリックイベントが実行され
先祖要素に伝達し、sectionにもクリックイベントがあるため、そのイベントも実行されます。
その伝達をstopPropagation()でストップさせているためliのクリックイベントが実行された時はsectionの
クリックイベントは実行されません。

#② preventDefault()
sectionがクリックされたときは【 sectionにclass="select" 】をつけて
section内のaをクリックした場合は【 aにclass="select" 】がつくと同時に【 sectionにclass="select" 】をつける
そしてaの機能(ページ遷移)を無効化する

こういった実装の場合に【preventDefault()】を使います。

HTML

<section>
     <div>
        <ul>
            <li><a href="#">クリック</a></li>
        </ul>
     </div>
</section>

jquery

$('section').click(function(){
   $(this).addClass('select');
});

$('a').click(function(e){
   $(this).addClass('select');
   e.preventDefault();
});

つまりはタグ自体(今回の場合aタグのリンク)の機能を無効化するということです。

#③ return false
sectionがクリックされたときは【 sectionにclass="select" 】をつけて
section内のaをクリックした場合は【 aにclass="select" 】をつけて【 sectionにはclass="select" 】をつけない
そしてaの機能(ページ遷移)を無効化する

こういった実装の場合に【return false】を使います。

HTML

<section>
     <div>
        <ul>
            <li><a href="#">クリック</a></li>
        </ul>
     </div>
</section>

jquery

$('section').click(function(){
   $(this).addClass('select');
});

$('a').click(function(){
   $(this).addClass('select');
   return false;
});

return falseは【stopPropagation()】と【preventDefault()】 の機能をひとつにまとめたものです。