Javascript preventDefaultとstopPropagation

preventDefault()とstopPropagation()のメモ

Eventの処理で使う

双方イベントリスナー内で使うことが多い。というかほとんど。イベントインターフェースのメソッドだからリスナーで処理するだろう。

stopPropagationが必要なところでうっかりpreventDefaultにしていたので、整理するためにこの記事でデモを設置し、メモをしておく。

preventDefaultメソッドは呼び出されると、ブラウザの規定動作を防ぐ（キャンセルする）。フォーム入力など見た目が変更されるときに使うことが多い。

preventDefault()が動作するイベントかどうかはevent.cancelableを読み取れば分かる。これがfalseであるときにpreventDefault()をしても効果はない。

stopPropagation()と同じ効果はないので、子要素のイベントリスナーの呼び出し終了後に、親要素のイベントリスナーは呼び出されることになる。イベントの伝播（バブリング）が普通に起こるということ。

stopPropagationメソッドは呼び出されると、親要素のイベントリスナーの呼び出しなどのイベントの伝播を防ぐ。ブラウザの規定動作は防がない。

onclickなどのイベントリスナーを親子関係にある要素で設定すると必要になることが多いと思う。設定しない場合は、子のイベントリスナーの実行後に親のも実行されてしまう。下のデモの上半分の部分で色々クリックするとよく分かる。

stopPropagation()とpreventDefault()の動作についてざっくりとしたデモを作ったので置いておく。

上半分は、stopPropagationのデモ。ボタンとボタン2とtomato色のdivをそれぞれ押してみると、alert()で伝播の様子がわかる。

ボタンではpreventDefault()を実行したあとにalert()を実行し、ボタン2ではalert()のみ実行する。そして、それらを内包するdivは、クリックするとalert()が呼ばれる。このため、ボタン2の押下時にはalert()が2回表示される。

下半分は、preventDefaultのデモ。textareaに文字の入力ができるが、preventDefault()を利用してeだけ入力できないようにしている。

eを入力したときのtextareaのデフォルト動作(入力文字がフィールドに挿入される動作)を防いでいることがわかる。 一部のブラウザでは正しく動作しないかもしれない（Safari 13.1では動かないのを確認済み）

同時利用するケースをデモでは作っていないが、単純に組み合わせれば普通に動くんじゃないかと思う。

Reactで使ったことを書き忘れていたが、普通のJavascriptでも同じはず。

何か書き加えることができたら追記したい。

以上です。

広告（Javascript関連書籍）