【JavaScript】キャンセルボタンで確認ダイアログを表示する－普通の場合/submitの場合
フォームの入力で削除ボタンを設置するとき，確認ダイアログを表示して削除をキャンセルできるようにします。通常の場合とsubmitの場合で書き方が異なります。個人的な備忘録として。
通常の場合
<button id="deleteButton" type="button">削除</button>
<script>
const elem = document.querySelector('#deleteButton');
elem.addEventListener('click', () => {
if(!confirm('削除してもよろしいですか？')) return false;
})
</script>通常の button はこれでオッケーです。イベントリスナをで click を設置して confirm で確認ダイアログを表示します。キャンセルをクリックすると !confirm() は true を返すので，return false とすることでボタンの処理をキャンセルします。
submit の場合
<form action="・・・・・・" method="POST">
<input id="itemDelete" type="submit" value="削除">
</form>
<script>
const elem = document.querySelector('#itemDelete');
elem.addEventListener('click', (event) => {
if(!confirm("削除してもよろしいですか？")) return event.preventDefault();
});
</script>type="submit" の場合は書き方を変える必要があります。return false の代わりに return event.preventDefault() を用います。
流れとしては引数に event を渡して preventDefault() でブラウザのデフォルトの動作（ここでは form の action の実行）を妨げます。単に return false では action を止めることはできないので preventDefault() を用いる必要があります。
SNSでシェア