裏紙に書く程度の内容

jQuery 初期の挙動を止める方法

目次はこちら > jQueryを使う際の25個Tipsを確認してみる

初期の挙動を止める為return falseをしましょう

についてです。

Tipsの説明

<a>タグでクリックイベントを設定する場合、単純にイベント定義するだけだと元々の機能である、アンカーへジャンプしてしまいます。

以下、例。

<a href='#' id='hoge'>Hoge</a>

のhtmlに対して

$('#hoge').on('click', function(){
    // 何らかの処理
});

だと、クリック時にページの先頭へジャンプします。

これを回避するには

$('#hoge').on('click', function(){
    // 何らかの処理
    return false;
});

とするといいよ、ってのがこのTipsです。

別の方法

しかしながら最近では上記のreturn false;はあまり見かけなくなりました。

どちらかというと以下の方法が多いかと。

$('#hoge').on('click', function(e){
    e.preventDefault();
    // 何らかの処理
});

簡単に説明すると、preventDefault()はその要素のイベントをキャンセルします。
また、似たようなものにstopPropagation()というのもあって、これは親要素へのイベントの伝播をキャンセルします。

return false;との違いは、return false;preventDefault()stopPropagation()両方を使ったのと同じで、自身のイベント、親へのバブリングの両方をキャンセルしています。

「初期の挙動を止める」という意図では、preventDefault()の方があっているでしょう。
あと、こっちの方を使うとなんだかあたまがよくなったきがする。

結論

初期の挙動を止めるにはpreventDefault()!
バブリングを止めるにはstopPropagation()!

URABLO
広告
Index
広告