Zenn
🏹

preventDefault()

2024/12/16に公開
JavaScript
tech

preventDefault()って何？

Webページでボタンやリンクをクリックすると、通常は「クリックしたら別のページに移動する」や「フォームを送信する」など、ブラウザが提供する標準の動作が実行されます。
でも、「この動作を止めたい！」というときに使えるのが preventDefault() です。

厳密な説明

preventDefault() は、「ブラウザがそのイベントに対して行う標準の動作（デフォルト動作）」をキャンセルするためのメソッドです。
例えば：

  • リンク → ページの遷移を止める。
  • フォーム送信 → サーバーにデータを送らない。

イベントって何？

「イベント」とは、ユーザーが行う操作のことです。
具体的には、次のようなものを指します：

  • マウス操作：クリック、ダブルクリックなど
  • キーボード操作：キー入力、Enterキーの押下など
  • フォームの送信：入力完了後に送信ボタンを押す
  • スクロールやページの読み込み

イベントリスナー（例: addEventListener） を使って、これらのイベントに対する特別な処理を実行することができます。

preventDefault()の使い方

使用例：どんなときに使うの？

  1. フォーム送信を止めたいとき
    通常、フォームを送信するとサーバーにデータが送られますが、これを止めてJavaScriptで独自の処理を行いたいときに使います。
  2. リンクのデフォルト動作を止めたいとき
    リンクをクリックしてもページ遷移をせず、他の動作（ポップアップを表示するなど）を行いたい場合に便利です。

フォーム送信を止める実装例

以下は、フォーム送信を防いで独自の処理を行う例です。

HTML
<form id="myForm">
  <input type="text" name="name" placeholder="名前を入力してください">
  <button type="submit">送信</button>
</form>
<script>
  document.querySelector("#myForm").addEventListener("submit", function(event) {
    event.preventDefault(); // フォーム送信を止める
    alert("送信を止めました！");
  });
</script>

リンクの動作を止める実装例

特定のリンクのデフォルト動作（ページ遷移）を止めて、別の処理を行う例です。

1つのリンクに適用する場合:

JavaScript
document.querySelector("a").addEventListener("click", function(event) {
  event.preventDefault(); // リンクの動作を止める
  alert("このリンクではページは移動しません！");
});

ページ内の複数リンクに適用する場合:

JavaScript
document.querySelectorAll("a").forEach(function(link) {
  link.addEventListener("click", function(event) {
    event.preventDefault(); // リンクの動作を止める
    alert("すべてのリンクで動作を止めました！");
  });
});

参考

https://developer.mozilla.org/ja/docs/Web/API/Event/preventDefault

Discussion