preventDefault vs stopPropagation in JavaScript Events
Main Difference
| Method | What 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!