jQuery return false と preventDefault() の違い

nissy 46views 更新:2016年9月4日

なかなか苦しんだ内容だったのでハックに残しておきます。

<div class="hoge">
  <a class="hogehoge" href="http://hogehoge.jp"> hogehoge.jpへ </a>
</div>

//以上の親要素と子要素に以下のクリックイベントを加える

/*イベント1*/
$(".hogehoge").click(function(){
    alert(".hogehoge");
});

/*イベント2*/
$(".hoge").click(function(){
    alert(".hoge");
});

このサンプルでは、「hogehoge.jpへ」というリンクをクリックすると、
1. alertの”.hogehoge”を表示
2. alertの”.hoge”を表示
3. リンク先の”hogehoge.jp”へ遷移
以上のように処理が行われます。

ここで、return falseとpreventDefault()を使用してみます。

1. return false;

イベント1に以下のようにreturn falseを加えてみると

$(".hogehoge").click(function(){
     return false;
     alert(".hogehoge");
});

このとき処理は、処理1~3すべてが行われなくなります。これはreturn falseによって、これ以降の処理及び親要素へ(今回では、hogehogeからhogeへ)のイベントの伝達の両方を無効にするためです。

2. preventDefault()

同様に追加してみます。

$(".hogehoge").click(function(e){
     e.preventDefault();
     alert(".hogehoge");
});

このとき処理は、処理3のみが行われなくなります。これはpreventDefault()によって、クリックされた要素のイベント(今回の場合は、リンク遷移)の処理のみ無効にするためです。

jQueryのクリックによるバブリングと処理の行われ方は、以下のページにかなりわかりやすく解説されていたので是非参考にすることをお勧めします!!
1分でわかるreturn false; preventDefault(); stopPropagation() の違い
jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」について

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません