やりたいこと
ページの入力フォームから情報を入力して送信する際、入力によってはアラートを出して情報を送信させないようにする機能をAddEventListenerを使って実装したい。
今回は下記のような入力フォームがあって、2つのセレクトボックスからそれぞれ入力する情報を選択する。
もし各セレクトボックスから同じ選択肢を選んで「合体」ボタン（submitボタン）を押した場合、
アラートが出て入力情報が送信されるのを防ぎたい。（違う入力であれば出さない）
実装
formのidはselect_form、各セレクトボックスのidはそれぞれfirst_persona、second_personaとなっている。
addEventListenerで送信ボタンが押された時に入力情報を判定する関数が動作するようにしている。
<script>
function checkPersonaId(event){
const first_persona_id = document.getElementById('first_persona').value;
const second_persona_id = document.getElementById('second_persona').value;
if(first_persona_id == second_persona_id){
alert('同じペルソナは選べません');
event.stopPropagation();
event.preventDefault();
}
}
const form = document.getElementById('select_form');
form.addEventListener('submit', checkPersonaId);
</script>
ポイントはifブロック内のstopPropagation()とpreventDefault()。AddEventListenerでイベントをキャンセルしたいときには、これら2つのメソッドをどちらも記述する必要がある。
return falseではイベントをキャンセルできない
イベントハンドラのonSubmitや、jQueryではreturn falseでイベントのキャンセルができるが、AddEventListenerを使っている場合にはreturn falseと記述してもイベントのキャンセルができない。
stopPropagationとpreventDefaultは何をしているのか
stopPropagationは親要素へのイベント伝搬をキャンセルし、preventDefaultはその要素のイベント自体をキャンセルしている。
要素のイベントをキャンセルすれば良いと思ってpreventDefaultだけ記述すると、イベント伝搬だけが行われて意図しない挙動となるので注意。
jQueryでのreturn falseはこのあたりのキャンセルをきちんと行ってくれるらしい。