2013年2月15日

jQueryのイベントで return false はしない方が良い

前回の記事を書いている時に検索にヒットしたリンクでちょっと「へぇ~っ」となったものがあったのでメモ。

 javascript - event.preventDefault() vs. return false - Stack Overflow

イベントのハンドラを書く時に、jQueryのイベントと通常のDOMのイベントでは

return false;

の意味が違うらしい。まずい、今まで気にしていなかった。。。


jQueryのイベント:

  •   デフォルト動作を抑止。
  •   イベントバブリングを中止する


通常のDOMのイベント: 

  •   デフォルト動作を抑止。(但しブラウザのバージョンに依存)
  •   イベントバブリングの中止はしない


という事らしい。


jQueryのイベントハンドラで return false; をしてしまうと、イベントバブリングまで中止されてしまう。これはあまり好ましくない事だ。

なぜイベントバブリングを中止する事が好ましくない(or やってはいけない)のかは、下の記事を読めばよく分かる。


jQuery Events: Stop (Mis)Using Return False | Fuel Your Coding


jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」について | ふじこのプログラミング奮闘記


JavaScriptのイベント伝播について覚書 | Linuxで自宅サーバ構築




結論



jQueryのイベントハンドラでは、

1. デフォルト動作を抑止するには、event.preventDefault() を 使う。

2. バブリングを中止する必要がある場合は、event.stopPropagation() もしくは
event.stopImmediatePropagation() を場面に応じて使い分ける。

3. return false は親要素にもイベントハンドラがアタッチされている場合などにバグの原因になり得るので、使う場合は十分に注意する。(もしくは使わない。)

というのが良いみたいだ。