@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 имеют другие классы, поэтому не срабатывает.
Причем, такая проблема только в хромоподобных браузерах.
Как исправить?
  • Вопрос задан
  • 135 просмотров
Пригласить эксперта
Ответы на вопрос 2
Нужно проверять есть ли у элемента, по которому был совершен клик, родитель с необходимым селектором. Так
Ответ написан
xakplant
@xakplant
Автор сайта xakplant.ru
Вам поможет деллигирование клика. Можете почитать тут

Там есть такой код:
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 и ничего не нашёл,
  // то обработчик просто заканчивает работу
}


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

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

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