Задать вопрос
ddimonn8080
@ddimonn8080
javascript

Почему при клике обработчик события срабатывает два раза?

Есть кастомный чекбокс:

Ссылка на Codepen.io

По клику на лейбле обработчик события срабатывает два раза.

В чем проблема?
  • Вопрос задан
  • 582 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Нетология
    Веб-разработчик с нуля: профессия с выбором специализации
    14 месяцев
    Далее
  • Академия Эдюсон
    Fullstack-разработчик на JavaScript + ИИ
    11 месяцев
    Далее
  • ProductStar × РБК
    Профессия: Инженер по тестированию + ИИ
    6 месяцев
    Далее
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Потому что клик на лейбл вызывает клик на инпуте (так лейблы устроены, могут вызывать клик на других элементах), а так как инпут находится внутри лейбла, событие при всплытии заставляет обработчик клика сработать ещё раз.

Какие есть варианты исправить ситуацию:
  1. Вешайте обработчик клика на инпут вместо лейбла
  2. Проверяйте целевой элемент, если не инпут - ничего делать не надо
  3. Обрабатывайте вместо click событие change
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы