JavaScript preventDefault

Written by Swapnil RajaPublished 24 Aug 2026

preventDefault stops the browser's normal response to an event.

A link navigates, a form submits, a checkbox ticks - these are default actions.

preventDefault cancels them so your code can decide instead.

Example

javascript

document.body.innerHTML = '<a id="link" href="/somewhere">Go</a>';

document.getElementById("link").addEventListener("click", function (event) {
  event.preventDefault();
  console.log("stayed on the page");
});

document.getElementById("link").dispatchEvent(
  new MouseEvent("click", { cancelable: true })
);

PreviousJavaScript Event Delegation NextJavaScript removeEventListener

Example

javascript

document.body.innerHTML =
  '<div id="box"><a id="link" href="/x">Go</a></div>';

const heard = [];

document.getElementById("box").addEventListener("click", function () {
  heard.push("box");
});

document.getElementById("link").addEventListener("click", function (event) {
  event.preventDefault();
  heard.push("link");
});

document.getElementById("link").dispatchEvent(
  new MouseEvent("click", { bubbles: true, cancelable: true })
);

console.log(heard.join(" "));

Example

javascript

document.body.innerHTML = '<form id="form"></form>';

document.getElementById("form").addEventListener("submit", function (event) {
  event.preventDefault();
  console.log("handled without reloading");
});

document.getElementById("form").dispatchEvent(
  new Event("submit", { cancelable: true })
);

Example

javascript

document.body.innerHTML = '<a id="link" href="/x">Go</a>';

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

link.addEventListener("click", function (event) {
  event.preventDefault();
  console.log(event.defaultPrevented);
});

link.dispatchEvent(new MouseEvent("click", { cancelable: true }));

Example

javascript

document.body.innerHTML = '<button id="btn">Go</button>';

document.getElementById("btn").addEventListener("click", function (event) {
  console.log(event.cancelable);
});

document.getElementById("btn").dispatchEvent(
  new MouseEvent("click", { cancelable: false })
);

Example

javascript

document.body.innerHTML =
  '<div id="box"><button id="btn">Go</button></div>';

document.getElementById("box").addEventListener("click", function (event) {
  if (event.target.id === "btn") {
    console.log("only handling the button");
  }
});

document.getElementById("btn").dispatchEvent(
  new MouseEvent("click", { bubbles: true })
);

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript preventDefault</title>
</head>
<body>

  <h1>preventDefault</h1>

  <form id="form">
    <input id="name" placeholder="Your name">
    <button type="submit">Send</button>
  </form>

  <a id="link" href="https://example.com">This link is disabled</a>

  <p id="out"></p>

  <script>
    const out = document.getElementById("out");

    document.getElementById("form").addEventListener("submit", function (event) {
      event.preventDefault();
      out.textContent = "Form handled without reloading";
    });

    document.getElementById("link").addEventListener("click", function (event) {
      event.preventDefault();
      out.textContent = "The link did not navigate";
    });
  </script>

</body>
</html>

JavaScript preventDefault

Example

preventDefault and stopPropagation

Syntax

They Are Not the Same

Example

Stopping a Form Reload

Example

Checking It Worked

Example

Not Everything Can Be Cancelled

Example

Use stopPropagation Carefully

Example

Complete Example

Try It Yourself

Important Points

Conclusion