JavaScriptのpreventDefaultとstopPropagationの違いと使い方を徹底解説

1. preventDefaultとは？

1. preventDefaultとは？

preventDefault()は、ブラウザが通常行う動作をキャンセルするためのメソッドです。リンクのクリックでページが移動する、フォームの送信でページがリロードされる、といったデフォルト動作を止めることができます。

const link = document.getElementById("myLink");

link.addEventListener("click", function(event) {
  event.preventDefault(); // デフォルトのリンク遷移を止める
  alert("リンクは押されましたが、ページは移動しません");
});

このように、リンククリックのデフォルト動作を止めつつ、自分の処理を実行できます。

2. stopPropagationとは？

2. stopPropagationとは？

stopPropagation()は、イベントが親要素や他のリスナーに伝わるのを防ぐためのメソッドです。例えば、ボタンをクリックしても親要素のクリックイベントを発火させたくない場合に使います。

const parent = document.getElementById("parentDiv");
const child = document.getElementById("childButton");

parent.addEventListener("click", () => {
  alert("親のクリックイベントが発火しました");
});

child.addEventListener("click", (event) => {
  event.stopPropagation(); // 親への伝播を止める
  alert("子のボタンがクリックされました");
});

子要素のクリックで親のイベントが実行されるのを防ぐことができます。

3. preventDefaultとstopPropagationの違い

3. preventDefaultとstopPropagationの違い

ポイントは、preventDefault()は「ブラウザの動作を止める」、stopPropagation()は「イベントの伝播を止める」という点です。意味を取り違えると、意図した動作が実現できないことがあります。

const form = document.getElementById("myForm");

form.addEventListener("submit", function(event) {
  event.preventDefault();      // フォーム送信のページ遷移を止める
  event.stopPropagation();     // 親要素のsubmitイベント伝播を止める
  console.log("フォーム送信イベントをカスタム処理");
});

必要に応じて両方使うことも可能です。

4. 実際の使い分け

4. 実際の使い分け

リンクやフォームなどブラウザのデフォルト動作を止めたい場合はpreventDefault()、親要素にイベントが伝わらないようにしたい場合はstopPropagation()を使います。二つはセットで使うこともありますが、意味を理解して使うことが大切です。

const link = document.getElementById("exampleLink");
link.addEventListener("click", function(event) {
  event.preventDefault();    // デフォルト動作を止める
  event.stopPropagation();   // 他のイベントへの伝播を止める
  alert("カスタム処理のみ実行されます");
});

5. イベント制御のコツ

5. イベント制御のコツ

初心者の方は、preventDefault()とstopPropagation()の意味を混同しやすいですが、ブラウザの動作を止めるか、イベントの伝播を止めるかを意識して使い分けることで、意図した挙動を簡単に実装できます。特にフォームやリンクのカスタム処理では、両方を適切に使うと便利です。