jQuery return false と preventDefault() の違い

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

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

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

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

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

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

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

1. return false;

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

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

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

2. preventDefault()

同様に追加してみます。

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

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

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