【JavaScript】return falseの意味について総まとめ。コード付で解説

---

JSのソースで散見する「return false」という記述。

何のためにやっているのか内部を知らずに使っている人もいるのではないでしょうか。

私も新人時代に先輩に「とりあえずreturn falseって書いとくんや」と言われ深く考えていませんでした。

今回備忘も兼ねて全てまとめてみようと思います。

return falseとは

return falseの意味を理解するためには、JavaScriptのイベント伝播の仕組みについて知っておく必要があります。

HTMLにおいてDOMがツリー状に管理されていることはご存知かと思います。

ここで重要なのは、ある要素で発火したイベントはその全ての親要素に伝播していくということです。
（これをバブリングと呼びます）

これをコードで見てみましょう。


親子関係にあるdiv要素があります。それぞれ色のついた部分をクリックしたらアラートがあがるようにしています。

子要素(青い部分)をクリックすると、バブリングにより親要素のクリックイベントも実行されることが確認できると思います。

このイベント伝播の制御に関わってくるのが
return false
preventDefault()
stopPropagation()

などになります。順番に見ていきましょう。

return falseを使ってイベント伝播を制御する

では実際にreturn falseを使用して親へのイベント伝播を止めてみましょう。

ここで超重要なのは

プレーンなJavaScriptとjQueryでreturn falseの挙動が異なる

ということです。

先に結論から言うと、

となります。

実際にコードで見てみましょう。

jQueryでreturn falseを使うパターン

先程と同じコードをjQueryで記述しました。

子要素(青い部分)をクリックした時のファンクションの最後にreturn falseを行っています。

なので青い部分をクリックしても親要素のクリックイベントは実行されず、子要素のアラートのみ表示されると思います。

JavaScriptでreturn falseを使うパターン

次はjQueryを使わず、プレーンなJavaScriptで書きました。

先程と同じように子要素のクリックイベントでreturn falseを行っていますが、親要素へのイベント伝播は実行され、アラートが2回あがると思います。

つまり、return falseでイベントの伝播を止めたい場合は、jQueryを使う必要があるということです。

JavaScriptで親要素へのイベント伝播を止める方法

ではJavaScriptのみでイベント伝播を止めるにはどうすれば良いのでしょうか？

そこで登場するのが
preventDefault()
stopPropagation()

という2つの関数です。

preventDefault()については、その要素自体のイベントを止める時に使うので、つまりJavaScriptのreturn falseと同じことです。

stopPropagation()はその要素自体のイベントに加え、そこから先の親要素へのイベント伝播もそこで止めたいときに使います。

つまりjQueryでのreturn falseと同じ動きをしてくれます。

ではstopPropagation()を使った動きをコードで見てみましょう。

コードの説明をすると、まずdivのonClickは削除し、

document.getElementById(ID名).onclickという書き方でもクリックイベントを拾うことができるのでこの書き方に変更し、

function(event){}と書くことでイベントオブジェクトをeventという変数名で扱えるようになるので、(別に変数名はeventじゃなくてもOK)

そのeventに対して、event.stopPropagation();とすることでイベント伝播を止めています。

return falseの時と異なりアラートは1つしか上がらないと思います。

プレーンなJavaScriptではこのようにしてイベント伝播を制御していきます。

JavaScriptのreturn falseはどういうときに使うのか

ここまで読むと、「なんだJSのreturn falseって意味ねぇじゃん。役立たずじゃん。」と思う人もいるかもしれませんので、

どのような時に役に立つか
使うときの注意点

について説明します。

aタグでクリックイベントのみ実行したい場合

画面遷移はしたくないけど、クリックしたときのイベントのみ行いたいときは下記のように記述することで実現できます。

onClickのreturnとしてfalseを返すことでその要素自体のイベントをそこでストップさせます。

注意点としては、onClick=”return ファンクション名” のように、呼び出すファンクション名の前にreturnを記述しないとfalseを検知してくれません。


これはよくある勘違いなので注意してください。試しに以下のようにonClick=”ファンクション名”とすると、ファンクション内でreturn falseとしていても新しいタブでGoogleのホームページが開かれてしまうはずです。

エラーがあったときにsubmit処理を止めたい場合

submit時にファンクションを実行し、エラーがあった場合にsubmitを止めたい場合にもreturn falseが使えます。

以下では、テキストボックスに何も入力されていない場合、アラートを表示してreturn falseを返すことでsubmitが実行されません。

逆に何か入力してから送信を押すとreturn trueとなるのでsubmitが動きます。(今はdummyなので404となります)

繰り返しになりますが、「return ファンクション名」と記述するのを忘れないようにしてくださいね。

returnとreturn falseの違いは？【補足】

ここまでの話でだいぶreturn falseについて理解できたかと思います。

では最後にまとめの意味も兼ねて、「プレーンなJavaScriptとjQueryで、returnとreturn falseを使うことでの動きの違い」を考えてみましょう。

イベント伝播のイメージはできましたか？


答えは

となります。イメージできていたらバッチリです。

さいごに

ポイントをまとめます

ここらへんを押さえておけば大丈夫でしょう。

JavaScriptは簡単そうに見えて奥が深いからたまらんですね。

それでは！また！！