JavaScript Events

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 })
);

The link no longer navigates away.

preventDefault and stopPropagation

preventDefault cancels the browser's built-in action.

stopPropagation stops the event reaching other elements.

They do completely different jobs and are often confused.

Syntax

javascript

event.preventDefault();
event.stopPropagation();

Neither one stops the current handler running.

They Are Not the Same

preventDefault affects what the browser does.

stopPropagation affects which handlers run.

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(" "));

The navigation was cancelled, but the event still bubbled to the box.

Stopping a Form Reload

This is the most common use of all.

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 })
);

Without it the page reloads and your JavaScript never finishes.

Checking It Worked

defaultPrevented reports whether the action was cancelled.

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 }));

The output is true.

Not Everything Can Be Cancelled

Only events marked cancelable respond to preventDefault.

scroll, for instance, cannot be cancelled this way.

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 })
);

Calling preventDefault on a non-cancelable event does nothing.

Use stopPropagation Carefully

It can break code somewhere else that was relying on the event arriving.

Checking event.target is usually a better solution.

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 })
);

No propagation had to be stopped for this to work.

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>

Try It Yourself

Run the above example in the Try It Editor.

Try removing it:

Delete preventDefault from the link and watch it navigate away.

Important Points

preventDefault cancels the browser's default action.
stopPropagation stops the event reaching other handlers.
They solve different problems.
defaultPrevented reports whether it worked.
Only cancelable events can be prevented.

Conclusion

preventDefault is what lets JavaScript take over from the browser.

Stopping a form reloading is the case you will meet first.

Reach for stopPropagation only when you genuinely need it.

PreviousJavaScript Event Delegation NextJavaScript removeEventListener