• 目的別厳選記事





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

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

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

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


●対象読者●

・return falseの意味を知らない
・JavaScriptとjQueryでreturn falseの挙動が違うことを知らない
・returnとreturn falseの違いを知らない
・preventDefault()とstopPropagation()について知らない

return falseとは

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

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

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

じゃけぇじゃけぇ

泡が水面に昇っていく様子に例えてるんだね

考える人考える人

かーーーしゃれとるの

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


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

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


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


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

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

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

ここで超重要なのは

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

ということです。

先に結論から言うと、


jQueryでのreturn false
 親要素へのイベント伝播を止める
JavaScriptでの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の場合
 aタグやsubmitなど特別な場合を除き、returnでもreturn falseでも動きは変わらない。(自要素のイベントを止めるだけで親要素へのイベント伝播は行われる)

jQueryの場合
 return falseとした場合は親要素へのイベント伝播は止まる。returnだけだと自要素のイベントは止まるが、親要素へのイベント伝播は行われる。



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

さいごに

ポイントをまとめます

●Point●

・JavaScriptとjQueryでreturn falseの挙動が違う
・JSではstopPropagation()でイベント伝播を止めれる
・onClickなどでfalseを検知するためには、[return ファンクション名]とする



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

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

それでは!また!!

最後まで読んで頂きありがとうございます!
人気の記事だけ集めたので是非覗いていってください^^
 厳選!目的別にオススメ記事を紹介-あなたの欲しい情報がここに-