return false、preventDefault()、stopPropagation()

huruhurupyotr 21views 更新:2017年2月2日

おおまかに書くとこんな感じだそうです。
preventDefault():リンクの遷移などのイベントを無効にできる。
HTMLでリンクの形式になっていても、これが書いてあると踏んでも遷移しないということですね。

stopPropagation():イベント伝播をキャンセルできる。リンク遷移は有効。
リンクは生きていますが、連続してイベントが起こるようにプログラムされていても、踏んだ要素以外のイベントは起こらないということになります。

preventDefault()+stopPropagation():
preventDefault()とstopPropagation()は併用可能。この場合alertで”.inner”は表示されるが”.outer”は表示されずリンクの遷移も発生しない。

return false:
return falseはそれが記述された箇所を読み込んだ時点で以降の処理がすべてなくなる。イベント伝播(バブリング)も発生しない。よって.innerをクリックした場合は”.inner”と”.outer”の両方が表示されずリンクの遷移も発生しない。

returnでfalseを返して何になるんだ?と困惑していたので(あほみたいな話で恐縮ですが……)、とてもためになりました。

参考:https://iwb.jp/return-false-preventdefault-stoppropagation/

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

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

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