How to add event listener to child that doesn't trigger the event listener on parent?

Question

I am trying to add event listeners to two elements, container and archive. They are in this hierarchy - container->timestamp->archive.

I added a event listener to archive button in the following way,

archive.addEventListener('click', ()=>{
    console.log("HI");
  })

In a similar way, I attached event listener to archive button's parent, container,

container.addEventListener('click', ()=>{
    open_email(element.id);
  })

Whenever I click on archive button, container's event listener gets triggered which is not desirable. I tried looking up event delegation but didn't get any idea to solve this problem. Any help would be appreciated.

`event.stopPropagation()` on the event in the archive. You will need to pass `event` in to the handler as an argument. https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation — Taplar, Aug 06 '20 at 14:05
Does this answer your question? [How do I detect a click outside an element?](https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element) — Taplar, Aug 06 '20 at 14:07
@Taplar, I read that thread before posting my question. I found a lot of people not recommending `stopPropagation`. — LoneWolf, Aug 06 '20 at 14:12
I would be interested in what articles you read. Stopping the propagation of the event is exactly the behavior you are after. — Taplar, Aug 06 '20 at 14:13
@Taplar, https://javascript.info/bubbling-and-capturing/. It says in this article "event.stopPropagation() creates hidden pitfalls that later may become problems.". — LoneWolf, Aug 06 '20 at 14:16
"may" being the important word. Everything in programming can become potential problems in the future. It's up to you as a developer to be aware of your own code base and know if it will be an issue. Further more, going off topic, this is why front end functional tests are important. — Taplar, Aug 06 '20 at 14:17

score 1 · Answer 1 · answered Aug 06 '20 at 14:06

1

You just need to stop the propagation of the event

archive.addEventListener('click', (e)=>{
    e.stopPropagation();
    console.log("HI");
  })

answered Aug 06 '20 at 14:06

MysterX

2,318
1
12
11

Surely there is a pre-existing duplicate for this some where. – Taplar Aug 06 '20 at 14:06
Sorry for asking silly question, I am new to JavaScript but I read in a article that using `stopPropagation` is dangerous and not recommended. – LoneWolf Aug 06 '20 at 14:09
2

The "danger" of stopping the propagation is that if other event listeners up the dom tree need the event, they would not get it. However, as a developer of the logic, you should be aware of your own situation and know if this is of a concern. If this is not an issue, stopPropagation works fine. – Taplar Aug 06 '20 at 14:16

score 1 · Accepted Answer · answered Aug 06 '20 at 14:08

const parent = document.querySelector('.parent');
const child = document.querySelector('.child');

parent.onclick = e => {
  console.log('You shouldn\'t see this');
}

child.onclick = e => {
  e.stopPropagation();
  console.log('Only child listener fired')
}

<div class='parent'>
  <div class='child'>Child</div>
</div>

event.stopPropagation stops further events to be triggered.

How to add event listener to child that doesn't trigger the event listener on parent?

2 Answers2