Webtech Walker

jQueryのイベントハンドラでreturn falseするとイベントのバブリングが止まる

例えばjQueryでスムーズスクロール的なのを実装したとして、a要素のデフォルトの機能を止めるために以下のようにreturn falseってするとイベントのバブリングまでとまるよという話。

$(function() {
  $('a[href*=#]').click(function() {
    // スムーズスクロールの処理
    ...

    return false;
  });
});

つまり

$(function() {
  $('a[href*=#]').click(function(ev) {
    ev.preventDefault();
    ev.stopPropagation();

    // スムーズスクロールの処理
    ...
  });
});

としたときと同じ挙動になる。return falseしてるコードは、デフォルトの挙動を止めるのは意図してるけど、イベントのバブリングまで止めるのは意図してない場合が多いんじゃなかろうかと思う。意図してるなら特に問題ない。

それでイベントのバブリングがとまると何が一番困るかというdelegateが使えなくなること。

具体的にはこれが動かない。

$(function() {
  $('a[href*=#]').click(function() {
    // スムーズスクロールの処理
    ...

    return false;
  });

  $(document).delegate('a', 'click', function() {
    alert('clicked!!');
  });
});

delegateはイベントのバブリングを利用してイベントを捕まえるので最初のスムーズスクロールでreturn falseしちゃうとそこでイベントのバブリングが止まるのでdelegateのイベントが実行されない。なのでイベントのデフォルトの動作を止めたいだけなら、できるだけ

$(function() {
  $('a[href*=#]').click(function(ev) {
    ev.preventDefault();

    // スムーズスクロースの処理
    ...
  });
});

のようにpreventDefault()を使うようにしたほうがいいよねというお話でした。

このエントリーをはてなブックマークに追加