Как добавить прослушиватель событий к дочернему элементу, который не запускает прослушиватель событий для родительского элемента?

Question

Я пытаюсь добавить слушателей событий к двум элементам, контейнеру и архиву. Они находятся в этой иерархии - контейнер-> отметка времени-> архив.

Я добавил прослушиватель событий к кнопке архива следующим образом:

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

Аналогичным образом я прикрепил событие слушатель родительского элемента кнопки архива, контейнера,

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

Каждый раз, когда я нажимаю кнопку архивирования, срабатывает прослушиватель событий контейнера, что нежелательно. Я попытался найти делегирование событий, но не понял, как решить эту проблему. Любая помощь приветствуется.

Answer 1

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 останавливает запуск следующих событий.

Answer 2

Вам просто нужно остановить распространение события

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