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

Есть такой блок кода:
<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?
  • Вопрос задан
  • 61 просмотр
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Используйте currentTarget, если внутри обработчика нужен элемент, к которому обработчик привязан.

Если таких элементов много, и обработчик висит на общем предке, тогда вам поможет closest.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
Event.currentTarget возвращает элемент, на которое повешен обработчик события.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы