[javascript] event.preventDefault()について

Question

経験1年目の javaPG です。

event.preventDefault()を使うシチュエーションついて質問です。

.preventDefault()はイベントによるブラウザの操作をキャンセルする
.stopPropagation()は親要素にバブリングさせない
という程度にバブリングを制御するメソッドと認識ですが、

clickイベントなどでバブリングを制御したほうがいいシチュエーション、機能は何が考えられますか。
何でもかんでもイベントを呼ぶ場合は、バブリングの制御をしたほうが良いのでしょうか。
使い分け、こういう時は必要ない、などご教示お願いいたします。

Answer 1

バブリングの制御をするケースとしては、
例えばモーダルを開いた時、
・モーダル以外をクリックしたら、モーダルを消したい
・モーダルをクリックしても何も起きない

この2つの条件を満たす実装をするケースを考えます。
前者を実現するために bodyタグに対してモーダルを閉じるクリックイベントを設定するとします。

そうすると、通常、モーダル自身もbodyタグ内に存在するため、モーダルをクリックするとイベントがバブリングしていき、bodyまで到達します。
そのため結果的に「モーダルをクリックすると、モーダルが消える」挙動が起きてしまいます。

この挙動を制御するために、モーダル自体のクリックイベントとして、stopPropagation()を設定する必要があります。
これで、モーダルおよびその内側の要素をクリックしても、bodyまでイベントがバブリングしないので、モーダルが消えることはなくなります。

Answer 2

JavaScriptのアクション専用に<a>タグを置いていた場合、そのまま放置していればclickでhrefへの遷移が起きてしまいます。そのため、e.preventDefault()で、デフォルトの操作を止める必要が出てきます。

なお、この場合は、href="javascript:void(0)"のようにすることでも対応は可能です。