preventDefault - 駆け出しのエンジニア日記

ブラウザを開いている場合、例えばリンクをクリックすればリンク先のページへ移動したり、チェックボックスをクリックすればチェックされるといったデフォルトの動作がいくつか設定されています。

Event オブジェクトの preventDefault メソッドを使用することで、イベントが発生したときにイベントに対してブラウザで設定されているデフォルトの動作をキャンセルさせることができます。

まずは書き方です。

 e.preventDefault();
 evt.preventDefault();

このように記述します。

ツイートできるフォームのサンプルで見てみましょう。

・htmlファイル

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Form Event</title>
</head>
<body>
 <h1>Form Event</h1>
 <form id="tweetForm" action="/hoge">
 <input type="text" name="username" placeholder="ユーザー名">
 <input type="text" name="tweet" placeholder="今何してる？">
 <button>ツイートする</button>
 </form>
 <script src="app.js"></script>
</body>
</html>

・jsファイル

const tweetForm = document.querySelector('#tweetForm');
tweetForm.addEventListener('submit', function (evt) {
 console.log('登録！')
})

上記のままで何かツイートすると、このようにエラーになります。

htmlファイルの「action」で指定されているURLにリクエストを投げ、戻ってきたレスポンスで画面のリフレッシュが行われます。

先ほどのツイートの画面が無くなり、次の画面に飛んでしまいます。つまりこのままではフォームのページでツイートの確認をしたくてもできなくなってしまいます。

そこで出てくるのが「preventDefault」というメソッドです。

デフォルトの動作をキャンセルできます。（今回は次ページに飛ぶこと）

※ちなみに、デフォルト動作のキャンセルは、Event.cancelableの値がtrueの場合に可能です。

const tweetForm = document.querySelector('#tweetForm');
tweetForm.addEventListener('submit', function (evt) {
 evt.preventDefault();
 console.log('登録！')
})