2014/05/13

【jQuery】イベントの伝播とブラウザの挙動をキャンセルする方法

【jQuery】イベントの伝播とブラウザのイベントをキャンセルする方法

要素にイベントを設定している際,子要素で発生したイベントが親要素にまで伝播してしまい,思ったような挙動にならないことがあります.

今回は,そんな場合に使える手法を紹介したいと思います.

目次

イベントの伝播とは

例えば,要素が以下の様な構造であったとします.

  <div id="parent">
    <a id="child" href="#">サンプルテキスト</a>
  </div>

ここで,ID名がparentとchildの双方に,別々のクリックイベント処理を設定したと仮定します.

childをクリックすると,クリックイベントがparentまで伝播し,childとparentの双方で別々のイベント処理が行われます.

発生したイベントが親要素へ伝播していくことをイベントの伝播(バブリング)などと言われます.

イベントの伝播をキャンセルする方法

子要素で起きたイベントを,親要素に伝播させないためには,以下のように記述します.

$("#child").click(function(event) {
    event.stopPropagation();
});

ブラウザの挙動をキャンセルする方法

次に,ブラウザの挙動をキャンセルする方法を紹介します.

これは,aタグをクリックしても,ページの遷移をさせたくない場合などに使用できます.

$("#child").click(function(event) {
    event.preventDefault();
});

※この記述をした場合は,ブラウザの挙動をキャンセルできますが,イベントの伝播はキャンセルされません.

さらに,イベントの伝播及びブラウザの挙動をキャンセルする方法として,以下の様な記述方法があります.

$("#child").click(function(event) {
    return false;
});

まとめ

イベントの伝播やブラウザの挙動のために思い通りの動きにならない場合もあるので,覚えておくといいと思います.