return falseの罠

こんばんは、有村です。
2017年ももう終わりますね。早いものです。

さてさて、今日のテーマはreturn falseの罠です!
さっそくコードサンプルを。。。

hogeとfuga両方とも、クリックでalertが出るというコード。
fugaをクリックした時は、バブリングによって「fuga → hoge」とアラートが出るようになっています。

ん?なって…います……?

実際にはこのコードだと、fugaクリック時には「fugaしかalertが出ない」となってしまいます!

ここで私はひっかかりました。。
このfuga、a要素本来の動き(リンク)を殺したくてreturn false;をつけているのですが、
return false;によってバブリングまで死んでしまって、
本来「fuga → hoge」とクリックイベントが伝搬するはずが、fugaで止まってしまったんですね…。

おさらい。
return false;って何をしているのか。
preventDefault(要素のイベント、つまりaだったらリンクのイベントをキャンセル)
stopPropagation(バブリングをキャンセル)
この2つが行われる。

なので、もしa要素本来の動きを殺したいだけであれば、

と書くべきだったのですね;;

return false;は便利なんですけど、たまにこのようなひっかけがあるので、
「何をキャンセルしたいのか」を常に意識することが大事だな〜と思いました!

それでは、きょうはこのへんで。