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()
を使うようにしたほうがいいよねというお話でした。
- Prev Entry:JavaScriptのゲッタ
- Next Entry:俺の最強ブログシステムも火を噴いてたぜ