Как «погрузить» событие?

Question

[Divviner]

Имеется такой код:

<button id="play" class="action-btn action-btn-big" data-type="play">
	<i class="fas fa-play"></i>
</button>

Можно видеть, что data-атрибут навешан на button, но вот парадокс: допустим мы навешали событие click на какой-нибудь внешний блок, и через делегирование хотим, чтобы по клику на button что-то делалось. В итоге проблема: на button срабатывает событие, а на иконке i - нет.

Вопрос: как достичь цели, чтобы не дублировать data-атрибуты, мы могли реализовать идею делегирования?

Заранее спасибо)))

Comments

[Виталий Першин]

В вашем примере можно на иконку повесить pointer-events none и клика по ней не произойдет, но вообще хотелось бы ваш код увидеть и посмотреть как именно вы делегируете событие.

Answer 1

[Сергей delphinpro]

Не нужно событие "погружать". Оно и без вас погрузится и всплывет. Вам нужно только отследить его.

Comments

[Divviner]

Огромное вам Спасибо! Всё сработало!

Answer 2

[mletov]

https://learn.javascript.ru/event-bubbling

И на button лучше type="button" прописать, т к там значение по умолчанию "submit".
Если обернуто в form, то будет форму сабмитить.