event.preventDefault()とは？使い方を解説します！【JavaScript】

event.preventDefault()は、JavaScriptのイベント処理において、イベントのデフォルトの動作をキャンセルするメソッドです。

この記事ではJavaScriptの『event.preventDefault()』について、以下の内容をサンプルコードを用いて分かりやすく説明するように心掛けています。ご参考になれば幸いです。

  • event.preventDefault()とは
  • event.preventDefault()メソッドの使い方
    • リンクのデフォルト動作を防ぐ
    • チェックボックスのデフォルト動作を防ぐ
    • フォーム送信のデフォルト動作を防ぐ
  • event.preventDefault()の注意点
    • event.cancelableがfalseのイベントには効かない

event.preventDefault()とは

event.preventDefault()は、その名の通り、eventのDefaultの動作をpreventする（妨げる）メソッドです。

JavaScriptでは、リンクをクリックすればリンク先のページへ移動したり、チェックボックスをクリックしたらチェックされるといったデフォルトの動作がいくつか設定されています。event.preventDefault()を呼び出すと、イベントが発生したときにイベントに対してブラウザで設定されているデフォルトの動作をキャンセルさせることができます。

以下に示すようにevent.preventDefault()を用います。

document.getElementById('xxx').addEventListener('イベント動作（clickやsubmitなど）', function(event){
    event.preventDefault(); // イベントのデフォルトの動作をキャンセル
    // ここにカスタムの処理を記述
});

event.preventDefault()の使い方

event.preventDefault()について、以下に示している使い方をこれから説明します。

  • リンクのデフォルト動作を防ぐ
  • チェックボックスのデフォルト動作を防ぐ
  • フォーム送信のデフォルト動作を防ぐ

上記の使い方について順番に説明します。

リンクのデフォルト動作を防ぐ

リンクをクリックするとブラウザは指定されたURLに遷移するのが、デフォルトの動作です。以下のサンプルコードではリンクをクリックしても、指定したURLに遷移せずに、アラートメッセージを表示するようにしています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <a href="https://example.com" id="myLink">リンク</a>
    <script>
      document
        .getElementById('myLink')
        .addEventListener('click', function (event) {
          event.preventDefault();
          alert('リンクのデフォルト動作が防がれました');
        });
    </script>
  </body>
</html>

上記のサンプルコードにおいて、a要素にはclickイベントに対するイベントリスナーを登録しています。

a要素をクリックすると、clickイベントに対するイベントリスナーが呼び出され、デフォルトの動作である指定したURLへの遷移をキャンセルした後、アラートの表示を行っています。そのため、このa要素をクリックしても指定したURLに遷移しません。

チェックボックスのデフォルト動作を防ぐ

チェックボックスはクリックすると、チェック状態が切り替るのが、デフォルトの動作です。以下のサンプルコードでは、チェックボックスをクリックしても、チェック状態を切り替えずに、アラートメッセージを表示するようにしています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <label> <input type="checkbox" id="myCheckbox" /> チェック </label>

    <script>
      document
        .getElementById('myCheckbox')
        .addEventListener('click', function (event) {
          event.preventDefault();
          alert('チェックボックスのデフォルト動作が防がれました');
        });
    </script>
  </body>
</html>

上記のサンプルコードにおいて、input要素にはclickイベントに対するイベントリスナーを登録しています。

input要素をクリックすると、clickイベントに対するイベントリスナーが呼び出され、デフォルトの動作であるチェック状態の切り替えをキャンセルした後、アラートの表示を行っています。そのため、このinput要素をクリックしてもチェック状態が切り替わりません。

フォーム送信のデフォルト動作を防ぐ

フォームが送信されると、サーバーにデータが送信されるのが、デフォルトの動作です。以下のサンプルコードでは、フォームの送信ボタンをクリックしても、フォームを送信せずに、アラートメッセージを表示するようにしています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <form id="myForm">
      <input type="text" name="name" placeholder="名前を入力" />
      <button type="submit">送信</button>
    </form>

    <script>
      document
        .getElementById('myForm')
        .addEventListener('submit', function (event) {
          event.preventDefault();
          alert('フォームの送信が防がれました');
        });
    </script>
  </body>
</html>

上記のサンプルコードでは、form要素にはsubmitイベントに対するイベントリスナーを登録しています。

送信ボタンをクリックすると、submitイベントに対するイベントリスナーが呼び出され、デフォルトの動作であるフォームの送信をキャンセルした後、アラートの表示を行っています。そのため、この送信ボタンをクリックしてもフォームの送信がキャンセルされるので、サーバーにデータが送信されません。

event.preventDefault()の注意点

event.preventDefault()の注意点を以下に示します。

  • event.cancelableがfalseのイベントには効かない

上記の注意点について順番に説明します。

event.cancelableがfalseのイベントには効かない

すべてのイベントをキャンセルできるわけではありません。イベントがキャンセル可能かどうかはevent.cancelableを使って確認できます。event.cancelableプロパティの値がtrueのイベントのみキャンセル可能です。以下にサンプルコードを示します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <label> <input type="checkbox" id="myCheckbox" /> チェック </label>

    <script>
      document
        .getElementById('myCheckbox')
        .addEventListener('click', function (event) {
          console.log(event.cancelable); // true
        });
    </script>
  </body>
</html>

clickイベントはキャンセル可能なので、input要素をクリックすると、event.cancelable プロパティの値が true になっていることが確認できます。

例えば、scrollイベント(要素のスクロール位置が変更されたときに発生するイベント)や、loadイベント(ページや画像、スクリプトなどのリソースが完全に読み込まれたときに発生するイベント)はキャンセルすることができません。以下にサンプルコードを示します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        height: 200vh; /* スクロール可能にするためにページの高さをウィンドウの2倍に設定 */
      }
    </style>
  </head>
  <body>
    <script>
      window.addEventListener('scroll', function (event) {
        console.log(event.cancelable); // false
      });

      window.addEventListener('load', function (event) {
        console.log(event.cancelable); // false
      });
    </script>
  </body>
</html>

ページの読み込み時やスクロール時にevent.cancelableがfalseになっていることが確認できます。

本記事のまとめ

この記事ではJavaScriptの『event.preventDefault()』について、以下の内容を説明しました。

  • event.preventDefault()とは
  • event.preventDefault()メソッドの使い方
    • リンクのデフォルト動作を防ぐ
    • チェックボックスのデフォルト動作を防ぐ
    • フォーム送信のデフォルト動作を防ぐ
  • event.preventDefault()の注意点
    • event.cancelableがfalseのイベントには効かない

お読み頂きありがとうございました。

スポンサーリンク