JavaScript ・ イベント
preventDefault()
ブラウザの標準の動作を止める
フォーム送信でのページ移動やリンクの遷移など、ブラウザが本来行う動作を取り消します。JavaScriptで独自の処理をしたいときに使います。
01
サンプルコード
HTML
1<form id="form">
2 <input name="email" type="email" placeholder="メールアドレス" required>
3 <button>登録</button>
4</form>
5<p id="result"></p>
CSS
1button {
2 padding: 6px 16px;
3 border: 1px solid #b68235;
4 border-radius: 4px;
5 background: #fff;
6 color: #7d5411;
7 font: inherit;
8 cursor: pointer;
9}
10input {
11 padding: 6px 10px;
12 border: 1px solid #bbb;
13 border-radius: 4px;
14 font: inherit;
15}
JS
1const form = document.querySelector('#form');
2
3form.addEventListener('submit', (event) => {
4 event.preventDefault();
5 const email = form.elements.email.value;
6 document.querySelector('#result').textContent = `${email} で登録しました`;
7 console.log('送信を止めて、JavaScriptで処理しました');
8});
02
実行結果
ブラウザでの表示メールアドレスを入力して「登録」を押しても、ページは移動しません
コンソール
- console.log() の出力がここに表示されます
03
解説
フォームを送信すると、ブラウザは通常ページを移動（再読み込み）します。submit イベントの中で event.preventDefault() を呼ぶと、この移動を止められます。
上の例では、送信を止めたうえで、入力されたメールアドレスを画面に表示しています。実際のサイトでは、ここで fetch() を使ってデータを送信します。
リンクの click イベントで呼ぶと、ページ移動を止めてアコーディオンの開閉などに使えます。
04
応用例・注意点
関連するメソッド
| メソッド | 説明 |
|---|---|
preventDefault() | ブラウザ標準の動作を止める |
stopPropagation() | 親要素へイベントが伝わるのを止める |
event.defaultPrevented | 止められたかどうか |
ページ内リンクをなめらかにスクロール
リンクの移動を止め、scrollIntoView() で動かします。
HTML
1<a href="#bottom" id="jump">下へ</a>
2<div style="height:600px"></div>
3<p id="bottom">ここが下です</p>
JS
1document.querySelector('#jump').addEventListener('click', (e) => {
2 e.preventDefault();
3 document.querySelector('#bottom').scrollIntoView({ behavior: 'smooth' });
4});
注意点
- 01preventDefault() を呼ぶと、ブラウザの入力チェック（required など）の後の送信も止まります。必要な処理は自分で書きます。
- 02スクロールなど一部のイベントは、passive 指定などにより止められない場合があります。