stopPropagation

Learn to stop an event from bubbling up and when to use it.

stopPropagation

Sometimes you do not want an event to bubble up to the parent. The event.stopPropagation() method stops the event from reaching ancestors. The child listener still runs, but the parent listener is not triggered.

child.addEventListener('click', (event) => {
  event.stopPropagation();
});

Use it only when truly needed; otherwise listeners on ancestor elements will not run and unexpected behavior may appear. It makes sense when the event is only about the target element.

Capture and bubble phases

An event goes through three phases: capture (parent to child), target (at the target element) and bubble (child to parent). By default, listeners run in the bubble phase.

parent.addEventListener('click', handler, true);

If you pass true as the third parameter, the listener runs in the capture phase; the parent fires before the child. Usually the bubble phase is enough.

Exercise Stop propagation in the child listener

Define a child variable and select the #child element. Add a click listener that calls event.stopPropagation() to stop the event from bubbling.

Show example solution

const child = document.querySelector('#child');
child.addEventListener('click', (event) => {
  event.stopPropagation();
  console.log('child');
});

Test yourself

What does event.stopPropagation() do?
```
child.addEventListener('click', (event) => {
  event.stopPropagation();
});
```
- Prevents the event's default behavior
- Removes the listener from the list
- Triggers the event again
- Stops the event from bubbling to the parent
Show answer

Stops the event from bubbling to the parent — Correct! stopPropagation stops the event from bubbling up.

Stop the propagation

child.addEventListener('click', (event) => {
  event.____();
});

Show answer

child.addEventListener('click', (event) => {
  event.stopPropagation();
});

Match phases to their directions

stopPropagation

Stops propagation
Capture phase

Parent to child
Bubble phase

Child to parent

Next lesson: Event delegation

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies