preventDefault()とstopPropagation()のメモ
Eventの処理で使う
双方イベントリスナー内で使うことが多い。というかほとんど。イベントインターフェースのメソッドだからリスナーで処理するだろう。
stopPropagationが必要なところでうっかりpreventDefaultにしていたので、整理するためにこの記事でデモを設置し、メモをしておく。
preventDefault
preventDefaultメソッドは呼び出されると、ブラウザの規定動作を防ぐ（キャンセルする）。フォーム入力など見た目が変更されるときに使うことが多い。
preventDefault()が動作するイベントかどうかはevent.cancelableを読み取れば分かる。これがfalseであるときにpreventDefault()をしても効果はない。
stopPropagation()と同じ効果はないので、子要素のイベントリスナーの呼び出し終了後に、親要素のイベントリスナーは呼び出されることになる。イベントの伝播（バブリング）が普通に起こるということ。
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では動かないのを確認済み）
See the Pen stopPropagation and preventDefault by ikapper (@ikapper) on CodePen.
おわり
同時利用するケースをデモでは作っていないが、単純に組み合わせれば普通に動くんじゃないかと思う。
Reactで使ったことを書き忘れていたが、普通のJavascriptでも同じはず。
何か書き加えることができたら追記したい。
以上です。
広告（Javascript関連書籍）
