【JavaScript】イベントを無効化する方法｜preventDefault・stopPropagation・disabled・removeEventListener・AbortController まで解説

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

form.addEventListener("submit", async (e) => {
  e.preventDefault(); // ページリロードを防止

  const formData = new FormData(form);
  const res = await fetch("/api/submit", {
    method: "POST",
    body: formData
  });

  console.log("送信完了:", await res.json());
});

document.querySelectorAll("a.no-navigate").forEach(link => {
  link.addEventListener("click", (e) => {
    e.preventDefault();
    console.log("遷移せず、独自処理を実行");
  });
});

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

parent.addEventListener("click", () => {
  console.log("親のクリック");
});

child.addEventListener("click", (e) => {
  e.stopPropagation(); // 親に伝播しない
  console.log("子のクリックのみ");
});

// 子をクリック → "子のクリックのみ"（親は発火しない）

// オーバーレイクリックでモーダルを閉じる
overlay.addEventListener("click", () => closeModal());

// モーダル内のクリックは閉じ処理を発火させない
modal.addEventListener("click", (e) => {
  e.stopPropagation();
});

const btn = document.getElementById("btn");

btn.addEventListener("click", (e) => {
  console.log("リスナー1: 実行される");
  e.stopImmediatePropagation();
});

btn.addEventListener("click", () => {
  console.log("リスナー2: 実行されない");
});

// ボタンをクリック → "リスナー1: 実行される" のみ

const btn = document.getElementById("submitBtn");

// 無効化
btn.disabled = true;

// 有効化
btn.disabled = false;

const btn = document.getElementById("submitBtn");

btn.addEventListener("click", async () => {
  btn.disabled = true;
  btn.textContent = "送信中...";

  try {
    await fetch("/api/submit", { method: "POST" });
    btn.textContent = "送信完了";
  } catch (e) {
    btn.disabled = false;
    btn.textContent = "再送信";
  }
});

.disabled-link {
  pointer-events: none;
  opacity: 0.5;
  cursor: default;
}

// 無効化
element.style.pointerEvents = "none";

// 有効化
element.style.pointerEvents = "";

function handleClick() {
  console.log("クリック！");
}

const btn = document.getElementById("btn");

// 登録
btn.addEventListener("click", handleClick);

// 削除（同じ関数参照が必要）
btn.removeEventListener("click", handleClick);

const controller = new AbortController();
const { signal } = controller;

// signal を渡してリスナーを登録
document.addEventListener("click", () => console.log("click"), { signal });
document.addEventListener("keydown", () => console.log("keydown"), { signal });
window.addEventListener("scroll", () => console.log("scroll"), { signal });

// すべてのリスナーを一括解除
controller.abort();
// → click, keydown, scroll のリスナーがすべて削除される

function initComponent(element) {
  const controller = new AbortController();
  const { signal } = controller;

  element.addEventListener("click", handleClick, { signal });
  element.addEventListener("mouseenter", handleHover, { signal });
  window.addEventListener("resize", handleResize, { signal });

  // クリーンアップ関数を返す
  return () => controller.abort();
}

const cleanup = initComponent(myElement);
// 不要になったら一括解除
cleanup();