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

Question

[Elvis]

Добавляю обработчик на элемент, потом на дочерний элемент, но при нажатии на дочерний срабатывают два.
Есть какой параметр на то чтобы не наследовался обработчик на дочерние элементы?

Answer 1

[Вадим]

Отменить всплытие события в обработчике клика дочернего элемента с помощью event.stopPropagation()

document.querySelector('.close').addEventListener('click', function(e){
  e.stopPropagation()
  document.querySelector('.result').insertAdjacentHTML('beforeend', '<div>Close</div>');
});

Либо в обработчике делать проверку на то, на каком конкретно элементе произошёл клик.

Comments

[Elvis]

интересный метод. Однако думал что я где то упустил параметр в объявлении addEventListener. Спасибо.

Answer 2

[otdameskapizm]

Можно попробовать просто при нажатии использовать target:

const inner = document.querySelector('.close');
inner.addEventListener('click', ({ target }) => {
  console.log(target);
})