preventDefaultとreturn falseがjQueryで同じに見える理由

jQueryで「return false」が万能に見える理由

フォーム送信を止めたいとき、リンク遷移を防ぎたいとき、jQueryのサンプルコードにはよく次の一行が書かれていました。

return false;

これだけで「送信も止まり、リンクも動かず、親要素のクリックも発生しない」。まるで魔法のように動きます。一方、ネイティブJavaScriptの解説では次のように書かれています。

e.preventDefault();
e.stopPropagation();

結論から言うと、jQueryにおいてreturn falseはpreventDefaultとstopPropagationを同時に実行する特別な挙動です。JavaScriptの仕様ではありません。jQuery独自のルールです。

ここを知らないまま書かれたコードは、jQueryを外した瞬間に壊れます。

ネイティブJavaScriptのイベントの意味

まずブラウザ標準の動作です。クリックイベントには「既定動作」が存在します。

• aタグ：ページ遷移
• form：送信
• checkbox：状態変更

preventDefaultは、この既定動作を止めます。

link.addEventListener('click', function(e){
  e.preventDefault();
});

これでリンクは遷移しません。しかし親要素のクリックイベントは発生します。なぜならpreventDefaultは「動作」を止めるだけで、「伝播」は止めないからです。

そこで必要になるのがstopPropagationです。

e.stopPropagation();

これはイベントバブリングを止めます。つまり役割が違います。

メソッド	役割
preventDefault	既定動作を止める
stopPropagation	親要素への伝播を止める

jQueryのreturn falseが特別な理由

jQueryでは次のコードが書けます。

$('a').on('click', function(){
  return false;
});

これ一行で

• リンク遷移が止まる
• 親のイベントも止まる

が同時に起きます。なぜならjQuery内部で次の処理が実行されているからです。

• e.preventDefault()
• e.stopPropagation()

つまりreturn falseはJavaScriptの意味ではなく、jQueryのイベントハンドラにおけるシンタックスシュガーです。

なぜこんな仕様になったのか

理由はブラウザ互換性です。

昔のブラウザでは

• preventDefaultが存在しない
• eventオブジェクトが取れない
• IEではreturn falseで送信が止まる

という状況でした。jQueryはそれらを統一するため、return falseに「全部止める」という意味を与えました。当時はこれが最も安全な書き方だったのです。

よくある誤解：JavaScriptでも同じだと思ってしまう

ネイティブのaddEventListenerで同じことを書くと動きません。

link.addEventListener('click', function(){
  return false;
});

これは何も起きません。イベントは普通に伝播し、リンクも遷移します。JavaScriptではreturn falseは単に関数の戻り値であり、イベント制御とは無関係です。

つまりjQueryコードをそのまま移植すると壊れる典型例です。

実務で起きるトラブル

次のような状況です。

• 既存システム：jQuery
• 新規コード：Vanilla JS

同じイベントハンドラを共有すると挙動が変わります。jQueryでは止まっていた送信が、ネイティブでは止まりません。これが「特定画面だけ送信される」原因になることがあります。

return falseのリスク

便利ですが、副作用があります。問題は「止めすぎる」ことです。

例えばモーダルダイアログの内側クリックでreturn falseを書くと、外側クリック検知が動かなくなります。stopPropagationまで実行されるためです。

本来必要なのはpreventDefaultだけ、というケースは少なくありません。

e.preventDefault();

用途に応じて使い分ける必要があります。

どちらを使うべきか

現在では明示的に書く方が安全です。

• 既定動作だけ止めたい → preventDefault
• 伝播だけ止めたい → stopPropagation
• 両方止めたい → 両方書く

return falseは短く書けますが、読み手が意図を理解できません。特にjQueryを知らない開発者が読むと意味不明になります。

結局なぜ「同じ意味」に見えるのか

jQueryがイベントの差異を吸収するため、return falseに複数の意味を持たせたからです。JavaScriptの仕様ではありません。

• JavaScript：return falseはただの戻り値
• jQuery：イベントを完全停止する命令

この違いが混乱の原因です。

jQueryは「書きやすさ」を優先した設計でした。その恩恵は大きかった一方で、ブラウザ本来のイベントモデルを隠してしまいました。return falseを理解することは、DOMイベントを理解する入口でもあります。

短く書けるコードほど、実は多くの処理を隠しています。return falseは、その代表例です。