Как исключить внутренние элементы при обработке события клика?

Question

[Александр]

Есть такой блок кода:

<div data-type="root">
	<p>Element p</p>
	<span>Element span</span>
</div>

const div = document.querySelector('div');
div.addEventListener('click', clickHandler);
function clickHandler(event) {
	const {type} = event.target.dataset;
	console.log(type);
}

При клике на внутренние теги p и span в консоле выводится undefined и только на пустоте div'а выводит root.
Как можно исключить внутренние элементы для события клика, чтобы при клике по всей площади div'а получать в ответ root?

Comments

[Steppp]

Примерно так, сравнивай на соответствие класса matches

function clickHandler(event) {
  if (event.targer.matches(div)) {
    const {type} = event.target.dataset;
    console.log(type);
  }
}

Answer 1

[0xD34F]

Используйте currentTarget, если внутри обработчика нужен элемент, к которому обработчик привязан.

Или вместо объекта события можете воспользоваться this - это и будет ссылка на нужный элемент. Конечно, только в том случае, если какое-то другое значение не было заранее привязано к обработчику (как такое может быть - bind и стрелочные функции).

Ещё бывает так (не ваш случай, но упомянуть стоит), что обработчик висит выше нужного элемента - в этом случае можно подняться до него от target с помощью closest.

Answer 2

[Rsa97]

Event.currentTarget возвращает элемент, на которое повешен обработчик события.