Как вызвать событие onclick только в дочернем элементе div, но не в родительском div?

Question

• У меня есть элемент div (родительский элемент) (DIV1), который печатает его имя при срабатывании события onclick.
• DIV1 имеет дочерний элемент div (DIV2), и он должен напечатать его name при срабатывании события onclick.
• Я также применил onclick к окну.

Но когда я нажимаю DIV2, он вызывает событие onclick DIV1, поэтому выводит имя родительского div (DIV1) вместо DIV2.

Итак, как мне убедиться, что при нажатии DIV1 он должен активировать DIV1 onlick, а когда я нажимаю DIV2, он должен запускать DIV2 onclick?

Answer 1

Используйте event.stopPropagation(), чтобы остановить распространение события щелчка div2 на div1

const clickHandler = (e,str) => {
e.stopPropagation()
console.log(str)
}

document.getElementById('div1').addEventListener('click',e=>clickHandler(e,'div1'))
document.getElementById('div2').addEventListener('click',e=>clickHandler(e,'div2'))

<div id="div1">
div 1
  <div id="div2">
div 2
  </div>
</div>