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

Question

[Дмитрий]

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

Ссылка на Codepen.io

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

В чем проблема?

Answer 1

[0xD34F]

Потому что клик на лейбл вызывает клик на инпуте (так лейблы устроены, могут вызывать клик на других элементах), а так как инпут находится внутри лейбла, событие при всплытии заставляет обработчик клика сработать ещё раз.

Какие есть варианты исправить ситуацию:

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