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

Question

[denism300]

Поставил на сайт модуль обратного звонка, который выводит окно при нажатии на кнопку.
Если сделать кнопку вида:

<button class="btn btn-primary callback-100" type="button">Заказать звонок</button>

то работает, если вида:

<button class="btn btn-primary callback-100" type="button">
    <i class="fas fa-headset"></i>
    <span class="sticky-text-none">Заказать звонок</span>
</button>

то не работает. Точнее работает, если кликать не по элементам i и span. Начал ковырять код. Клик обрабатывается так:

document.body.addEventListener('click', function (event) {
    if(event.target.classList.contains(event.target.classList.contains("callback-" + mod_id) == true) {
        .... тут код вывода окна и прочее ... 
    }
}

Как бы причина понятна, элементы i и span имеют другие классы, поэтому не срабатывает.
Причем, такая проблема только в хромоподобных браузерах.
Как исправить?

Answer 1

[Александр Епихин]

Нужно проверять есть ли у элемента, по которому был совершен клик, родитель с необходимым селектором. Так

Comments

[denism300]

я на данный момент сделал так:

if(event.target.classList.contains(event.target.classList.contains("callback-" + mod_id) == true || event.target.parentNode.classList.contains("callback-" + mod_id) == true) {
        .... тут код вывода окна и прочее ... 
    }

[Александр Епихин]

parentNode не очень хороший вариант. Так как проверяет только родителя, а не всех предков. Если в вашей кнопке будет большая вложенность то это не сработает.
Например:

Заказать звонок

Клик сработает на i, потом ищется его родитель, это div, у которого нет нужного класса.

Answer 2

[Борис Черепанов]

Вам поможет деллигирование клика. Можете почитать тут

Там есть такой код:

table.onclick = function(event) {
  var target = event.target;

  // цикл двигается вверх от target к родителям до table
  while (target != table) {
    if (target.tagName == 'TD') {
      // нашли элемент, который нас интересует!
      highlight(target);
      return;
    }
    target = target.parentNode;
  }

  // возможна ситуация, когда клик был вне <td>
  // если цикл дошёл до table и ничего не нашёл,
  // то обработчик просто заканчивает работу
}

Он, мне кажется, как ни что лучше описывает вашу ситуацию