Как обработать событие 'click', что бы оно срабатывало по выбранному селектору и всем элементам внутри него?

Question

[Андрей]

Здравствуйте! Допустим есть такой простенький html код

<div class="hero__item">
       <a href="#" class="hero__subtitle">Дополнительные услуги</a>
</div>

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

Comments

[Антон Литвиненко]

https://learn.javascript.ru/bubbling-and-capturing

Answer 1

[ForSureN1]

if(e.target.closest('.hero__item')) {
//
}

Answer 2

[SeptemberOlya]

Есть два пути:
1. в стилях прописать
.hero__item {
pointer-events: none;
}

2. В обработке клика использовать e.currentTarget, тогда клик будет только по нужному элементу и не будет трогать детей.