What is the difference between preventDefault and stopPropagation?

Q: What is the difference between preventDefault and stopPropagation?

**Target Audience:** Engineers preparing for JavaScript DOM/events interviews. **Difficulty:** Medium > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . Both isolated tests below were actually run with jsdom. ## 1. Why This Even Matters — A Story First Imagine a letter mailed through a chain of post offices, each one an ancestor listener along the route. `stopPropagation()` is telling the current post office "do not forward this letter to the next office" — the letter's journey stops right here. `preventDefault()` is a completely separate instruction written ON the letter itself: "do not actually deliver this to the final recipient's mailbox" — it says nothing about whether the letter keeps moving through the postal chain. The two instructions genuinely do not interact with each other at all. ## 2. The Core Idea 📌 **Interview term:** `preventDefault()` cancels the browser's built-in default action for the

The problem

Question presented to candidate: "If you call only preventDefault() inside a click handler, does the event still reach a listener on a parent element? And if you call only stopPropagation(), does the browser still perform its default action for that click?"

What a strong answer should cover:

📌 Interview term: preventDefault() — cancels the browser's built-in default action for the event (following a link, submitting a form, checking a checkbox) — it does not affect whether the event continues traveling to ancestor listeners.
📌 Interview term: stopPropagation() — stops the event from continuing to travel through the remaining capture/bubble phases to any further ancestors — it does not cancel the browser's own default action.
📌 Interview term: the direct, verified answer to the prompt — calling only preventDefault() still let an ancestor's listener genuinely fire (propagation continued), while event.defaultPrevented became genuinely true; calling only stopPropagation() genuinely stopped the ancestor's listener from firing at all, while event.defaultPrevented genuinely stayed false — verified directly, proving the two are independent.
A precise answer names that both can be called together in the same handler when both effects are needed simultaneously (a common real pattern for a custom-styled link/button that should neither navigate nor let the click bubble to an outer handler).
A precise answer names stopImmediatePropagation() as a related, stricter variant: it stops propagation to ancestors and prevents any remaining listeners on the same element from running, unlike plain stopPropagation().

Clarifying questions expected:

None — this is a definitional/comparison question; directly answering both halves of the prompt's own two questions with the verified proof is the strong signal.

Code / implementation expected: Yes — the two isolated tests (preventDefault-only vs. stopPropagation-only) are the clearest, most convincing way to show they are independent.

events

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for JavaScript DOM/events interviews. Difficulty: Medium

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. Both isolated tests below were actually run with jsdom.

1. Why This Even Matters — A Story First

Imagine a letter mailed through a chain of post offices, each one an ancestor listener along the route. stopPropagation() is telling the current post office "do not forward this letter to the next office" — the letter's journey stops right here. preventDefault() is a completely separate instruction written ON the letter itself: "do not actually deliver this to the final recipient's mailbox" — it says nothing about whether the letter keeps moving through the postal chain. The two instructions genuinely do not interact with each other at all.

2. The Core Idea

📌 **Inte

The solution is hidden so you can try first

5 min read · 8 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.

JavaScriptReal, isolated proof that preventDefault and stopPropagation act completely independently