Hack Frontend Community

Difference Between event.preventDefault() and event.stopPropagation()

Main Difference

MethodWhat it Does
event.preventDefault()Cancels default browser behavior
event.stopPropagation()Stops event bubbling through DOM tree

They're often used together, but perform different tasks.

What "event.preventDefault()" Does

preventDefault() stops default behavior that the browser performs for a specific event.

"event.preventDefault()" Example

<a href="https://google.com" id="link">Go</a>

document.getElementById("link").addEventListener("click", (event) => {
  event.preventDefault();
  console.log("Navigation cancelled");
});

Link won't open because default browser action is cancelled.

What "event.stopPropagation()" Does

stopPropagation() stops event bubbling up the DOM tree — parent handlers won't be called.

"event.stopPropagation()" Example

<div id="parent">
  <button id="child">Click me</button>
</div>

document.getElementById("parent").addEventListener("click", () => {
  console.log("Click on parent");
});

document.getElementById("child").addEventListener("click", (event) => {
  event.stopPropagation();
  console.log("Click on button");
});

Clicking the button will only output: Click on button Parent click handler won't trigger.

What if You Use Both?

Sometimes you need to both prevent behavior and stop bubbling:

element.addEventListener("submit", (event) => {
  event.preventDefault();     // cancel form submission
  event.stopPropagation();    // prevent event from reaching parent
});

Important:

Both methods are not interchangeable — use each strictly for its purpose!