JavaScriptにおけるevent.preventDefaultの使い方と注意点10選

●event.preventDefaultとは？

Webアプリケーションを開発していると、リンクやフォームのデフォルトの動作をキャンセルしたいケースに遭遇しますよね。

そんなときに役立つのが、JavaScriptのevent.preventDefaultメソッドです。

○デフォルトの動作をキャンセルする

event.preventDefaultは、その名の通り、イベントのデフォルトの動作を防ぐために使用します。

例えば、aタグのhref属性を指定した場合、通常はリンク先のページに遷移しますが、event.preventDefaultを呼び出すことで、その遷移をキャンセルすることができるのです。

○サンプルコード1：リンクのデフォルト動作のキャンセル

それでは、リンクのデフォルト動作をキャンセルする例を見てみましょう。

<a href="https://www.example.com" id="myLink">リンク</a>

document.getElementById('myLink').addEventListener('click', function(event) {
  event.preventDefault();
  console.log('リンクがクリックされました。');
});

このコードでは、id属性が”myLink”のa要素に対して、クリックイベントのリスナーを追加しています。

リンクがクリックされると、event.preventDefaultが呼び出され、デフォルトの動作（ページ遷移）がキャンセルされます。

代わりに、コンソールに「リンクがクリックされました。」というメッセージが出力されます。

実行結果

リンクがクリックされました。

このように、event.preventDefaultを使うことで、リンクのデフォルト動作を簡単にキャンセルできました。

ユーザーがリンクをクリックしても、ページ遷移は発生せず、代わりに指定した処理が実行されるわけです。

○サンプルコード2：フォーム送信のキャンセル

続いて、フォームの送信をキャンセルする例を見てみましょう。

<form id="myForm">
  <input type="text" name="username">
  <button type="submit">送信</button>
</form>

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault();
  console.log('フォームが送信されました。');
});

このコードでは、id属性が”myForm”のform要素に対して、submitイベントのリスナーを追加しています。

フォームが送信されると、event.preventDefaultが呼び出され、デフォルトの動作（フォームのデータ送信とページのリロード）がキャンセルされます。

代わりに、コンソールに「フォームが送信されました。」というメッセージが出力されます。

実行結果

フォームが送信されました。

フォームの送信をキャンセルすることで、ページのリロードを防ぎつつ、フォームのデータを JavaScript で処理することができます。

これは、フォームのバリデーションや Ajax を使ったデータ送信などに役立ちます。

●event.preventDefaultの使い方

event.preventDefaultは、JavaScriptでイベントのデフォルトの動作をキャンセルするために使われるメソッドですが、その使い方はとてもシンプルです。

イベントリスナーの中で event.preventDefault() を呼び出すだけで、イベントのデフォルトの動作をキャンセルできるのです。

○サンプルコード3：イベントリスナーでの使用

では早速、イベントリスナーの中でevent.preventDefaultを使ってみましょう。

<a href="https://www.example.com" id="myLink">リンク</a>

document.getElementById('myLink').addEventListener('click', function(event) {
  event.preventDefault();
  console.log('リンクがクリックされました。');
});

このコードでは、id属性が”myLink”のa要素に対して、クリックイベントのリスナーを追加しています。

リンクがクリックされると、event.preventDefaultが呼び出され、リンクのデフォルトの動作（ページ遷移）がキャンセルされます。

代わりに、コンソールに「リンクがクリックされました。」というメッセージが出力されます。

実行結果

リンクがクリックされました。

○サンプルコード4：条件付きでのキャンセル

ただ、常にデフォルトの動作をキャンセルするのではなく、条件に応じてキャンセルしたい場合もありますよね。

そんなときは、if文を使って条件分岐を行います。

<form id="myForm">
  <input type="text" name="username" required>
  <button type="submit">送信</button>
</form>

document.getElementById('myForm').addEventListener('submit', function(event) {
  if (!event.target.username.value) {
    event.preventDefault();
    alert('ユーザー名を入力してください。');
  }
});

このコードでは、フォームの送信時に、ユーザー名の入力欄が空欄であれば、event.preventDefaultを呼び出してフォームの送信をキャンセルし、アラートを表示します。

ユーザー名が入力されている場合は、デフォルトの動作（フォームの送信）が実行されます。

実行結果（ユーザー名が空欄の場合）

ユーザー名を入力してください。

○サンプルコード5：カスタムイベントでの使用

event.preventDefaultは、カスタムイベントでも使うことができます。

カスタムイベントとは、開発者が独自に定義するイベントのことです。

const myEvent = new CustomEvent('myEvent', {
  cancelable: true
});

document.addEventListener('myEvent', function(event) {
  event.preventDefault();
  console.log('カスタムイベントがキャンセルされました。');
});

document.dispatchEvent(myEvent);

このコードでは、’myEvent’というカスタムイベントを作成し、cancelable属性をtrueに設定しています。

これにより、event.preventDefaultを呼び出すことで、このカスタムイベントをキャンセルできるようになります。

実行結果

カスタムイベントがキャンセルされました。

○サンプルコード6：delegateEventでの使用

最後に、イベントの委譲（delegateEvent）での使用例を見てみましょう。

イベントの委譲とは、親要素にイベントリスナーを設定し、子要素で発生したイベントを親要素で処理する手法です。

<ul id="myList">
  <li><a href="https://www.example.com">リンク1</a></li>
  <li><a href="https://www.example.com">リンク2</a></li>
  <li><a href="https://www.example.com">リンク3</a></li>
</ul>

document.getElementById('myList').addEventListener('click', function(event) {
  if (event.target.tagName === 'A') {
    event.preventDefault();
    console.log('リンクがクリックされました。');
  }
});

このコードでは、id属性が”myList”のul要素に対して、クリックイベントのリスナーを追加しています。

ul要素の子要素であるa要素がクリックされた場合、event.targetのtagNameプロパティを使って、クリックされた要素がa要素であることを確認します。

そして、event.preventDefaultを呼び出して、リンクのデフォルトの動作をキャンセルします。

実行結果（リンク1、リンク2、リンク3のいずれかをクリックした場合）

リンクがクリックされました。

このように、event.preventDefaultは、イベントリスナーの中で使うことで、イベントのデフォルトの動作をキャンセルできます。

条件付きでのキャンセル、カスタムイベントでの使用、イベントの委譲での使用など、様々な場面で活用できる便利なメソッドです。

●event.preventDefaultの注意点

event.preventDefaultは便利なメソッドですが、使い方を間違えるとWebアプリケーションの動作に悪影響を与えてしまうこともあります。

ここでは、event.preventDefaultを使う上での注意点を3つ紹介します。

○return falseとの違い

event.preventDefaultと似たような役割を果たすものとして、return falseがあります。

例えば、次のようなコードを見たことがあるかもしれません。

document.getElementById('myLink').onclick = function() {
  // 何らかの処理
  return false;
};

この場合、return falseは、event.preventDefault()とevent.stopPropagation()の両方を実行するのと同じ効果があります。

つまり、イベントのデフォルトの動作をキャンセルし、かつイベントが親要素に伝播するのを防ぎます。

一方、event.preventDefault()は、イベントのデフォルトの動作をキャンセルするだけで、イベントの伝播は止めません。

状況に応じて適切な方を使い分ける必要があります。

○イベントの伝播への影響

先ほども触れましたが、event.preventDefault()はイベントの伝播を止めません。

つまり、イベントは、キャンセルされたにもかかわらず、親要素に伝播していきます。

<div id="myDiv">
  <a href="https://www.example.com" id="myLink">リンク</a>
</div>

document.getElementById('myDiv').addEventListener('click', function() {
  console.log('divがクリックされました。');
});

document.getElementById('myLink').addEventListener('click', function(event) {
  event.preventDefault();
  console.log('リンクがクリックされました。');
});

このコードでは、a要素をクリックすると、「リンクがクリックされました。」と「divがクリックされました。」の両方がコンソールに出力されます。

a要素のクリックイベントでevent.preventDefault()が呼び出されても、イベントはdiv要素に伝播するのです。

実行結果

リンクがクリックされました。
divがクリックされました。

○不適切な使用によるユーザーエクスペリエンスの低下

event.preventDefault()を不適切に使用すると、ユーザーエクスペリエンスを損なう可能性があります。

例えば、ユーザーがテキストをコピーしようとしたときに、event.preventDefault()でそれを禁止するようなことは避けるべきです。

document.addEventListener('copy', function(event) {
  event.preventDefault();
  console.log('コピーは禁止されています。');
});

このコードは、ページ内のテキストのコピーを禁止します。

しかし、ユーザーにとっては、テキストのコピーは基本的な操作の一つです。

それを禁止することで、ユーザーの利便性を大きく損なってしまいます。

実行結果

コピーは禁止されています。

event.preventDefault()は強力なツールですが、ユーザーの期待する動作を妨げるような使い方は避けなければなりません。

Webアプリケーションを設計する際は、常にユーザーの視点に立ち、ユーザーにとって自然で直感的な動作を心がける必要があります。

●event.preventDefaultの応用例

ここまでevent.preventDefaultの基本的な使い方と注意点を見てきましたが、具体的にどのようなシーンで活用できるのでしょうか。

ここでは、event.preventDefaultを使った4つの応用例を紹介します。

○サンプルコード7：フォームのバリデーション

フォームのバリデーションは、event.preventDefaultの代表的な使用例の一つです。

ユーザーが入力した内容をチェックし、不適切な場合はフォームの送信を中止することができます。

<form id="myForm">
  <input type="text" name="username" required>
  <input type="email" name="email" required>
  <button type="submit">送信</button>
</form>

document.getElementById('myForm').addEventListener('submit', function(event) {
  const username = event.target.username.value;
  const email = event.target.email.value;

  if (username.length < 4) {
    alert('ユーザー名は4文字以上で入力してください。');
    event.preventDefault();
  }

  if (!email.includes('@')) {
    alert('メールアドレスが正しくありません。');
    event.preventDefault();
  }
});

このコードでは、フォームの送信時に、ユーザー名とメールアドレスをチェックしています。

ユーザー名が4文字未満の場合、またはメールアドレスに@が含まれていない場合、event.preventDefault()を呼び出してフォームの送信を中止し、アラートを表示します。

実行結果（ユーザー名が4文字未満の場合）

ユーザー名は4文字以上で入力してください。

実行結果（メールアドレスが正しくない場合）

メールアドレスが正しくありません。

○サンプルコード8：ドラッグ&ドロップの実装

event.preventDefaultは、ドラッグ&ドロップの操作にも使われます。

デフォルトでは、ブラウザ上でファイルをドラッグすると、そのファイルが新しいページとして開かれてしまいます。

これを防ぐために、dragoverイベントとdropイベントでevent.preventDefault()を呼び出します。

<div id="dropZone">
  ここにファイルをドロップしてください。
</div>

const dropZone = document.getElementById('dropZone');

dropZone.addEventListener('dragover', function(event) {
  event.preventDefault();
});

dropZone.addEventListener('drop', function(event) {
  event.preventDefault();
  const files = event.dataTransfer.files;
  console.log(files);
});

このコードでは、id属性が”dropZone”のdiv要素を、ファイルのドロップ領域として設定しています。

dragoverイベントとdropイベントのデフォルトの動作をキャンセルすることで、ファイルをドロップしたときに、そのファイルがブラウザで開かれるのを防ぎます。

実行結果（ファイルをドロップした場合）

FileList {0: File, length: 1}

○サンプルコード9：カスタムショートカットキーの実装

event.preventDefaultを使えば、独自のショートカットキーを実装することもできます。

例えば、Ctrl + Sキーを押したときに、独自の保存処理を実行するとしましょう。

document.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.key === 's') {
    event.preventDefault();
    console.log('保存処理を実行します。');
  }
});

このコードでは、Ctrl + Sキーが押されたときに、event.preventDefault()を呼び出して、ブラウザのデフォルトの保存処理をキャンセルしています。

そして、代わりに独自の保存処理を実行します。

実行結果（Ctrl + Sキーを押した場合）

保存処理を実行します。

○サンプルコード10：ダブルサブミットの防止

フォームの送信ボタンを連続して素早くクリックすると、フォームが複数回送信されてしまうことがあります。

これをダブルサブミットと呼びます。

event.preventDefaultを使えば、このダブルサブミットを防ぐことができます。

<form id="myForm">
  <button type="submit">送信</button>
</form>

let isSubmitting = false;

document.getElementById('myForm').addEventListener('submit', function(event) {
  if (isSubmitting) {
    event.preventDefault();
  } else {
    isSubmitting = true;
    console.log('フォームを送信します。');
  }
});

このコードでは、isSubmittingという変数を使って、フォームの送信状態を管理しています。

フォームが送信されると、isSubmittingをtrueに設定します。

isSubmittingがtrueの状態でフォームが再度送信されると、event.preventDefault()が呼び出され、重複送信が防止されます。

実行結果（フォームを連続して送信した場合）

フォームを送信します。

まとめ

JavaScriptのevent.preventDefaultメソッドは、Webアプリケーション開発に欠かせない重要な機能です。

リンクやフォームのデフォルトの動作をキャンセルし、ユーザーエクスペリエンスを向上させるために活用されます。

使い方は簡単ですが、注意点もいくつかあります。

フォームのバリデーションやドラッグ&ドロップなど、様々な場面で応用できるため、マスターしておくことをおすすめします。

ただし、不適切な使用は逆効果になるので、ユーザーの視点に立った適切な実装が求められます。