Почему событие вызывается 2 раза?

Question

Событие клика вызывает 2 раза. Событие change вызывается 1 раз, но тольео для первого элемента

function toggleCheckbox() {
  const list = document.querySelectorAll('.form-callback-input-checkbox-label');
  list.forEach((input) => {
    input.addEventListener("click", function() {
      alert(this)
    });
  });
}

toggleCheckbox();

https://codepen.io/Alexxxsander/pen/qBMqeyg

Answer 1

Вы событие вешаете на весь label, а он триггерит инпут, отсюда 2 срабатывания (label + input). Решение банальное, вешать клик на input:

const list = document.querySelectorAll('.form-callback-input-checkbox-label input');

function toggleCheckbox() {
  const list = document.querySelectorAll('.form-callback-input-checkbox-label input');
  list.forEach((input) => {
    input.addEventListener("click", function() {
      alert(this)
    });
  });
}

toggleCheckbox();

<label for="form-callback-checkbox-input-1" class="form-callback-input-checkbox-label">
  <div class="form-callback-input-checkbox-position">
    <input type="checkbox" name="checkbox-input" class="form-callback-input-checkbox-input" id="form-callback-checkbox-input-1">
  </div>
  <span class="form-callback-input-checkbox-name">Тест-день! Получить скидку -30%?</span>
</label>
<label for="form-callback-checkbox-input-2" class="form-callback-input-checkbox-label">
  <div class="form-callback-input-checkbox-position">
    <input type="checkbox" name="checkbox-input" class="form-callback-input-checkbox-input" id="form-callback-checkbox-input-2">
  </div>
  <span class="form-callback-input-checkbox-name">Тест-день! Получить скидку -30%?</span>
</label>

БЛОГ НА HUSL

Почему событие вызывается 2 раза?

Ответы (1 шт):