addEventListener вызывается два раза при переборе через forEach

Question

Код очень простой, обычно у меня это работало, но не в данном случаи, таких же переменных нету, названия менял. Вот код из-за которого всё и ломается:

let slides = document.querySelectorAll('.calendarBlock__slide');

slides.forEach((slide, i) => {
  let ids = slide.querySelectorAll('.calendar__checkInput');

  ids.forEach((id, x) => {
    let type = id.getAttribute('data-type');
    let label = id.parentNode;
    let number = `s${i+1}${type}`;

    id.setAttribute('id', number);
    label.setAttribute('for', number);
  });
})

Вот код с перебором:

let labels = document.querySelectorAll('.calendar__type');
labels.forEach(item => {
  item.addEventListener('click', () => {
    console.log(item)
    item.classList.toggle('active');
  })
})

<div class="calendar__types">
  <label for="" class="calendar__type calendar__type_green">
      <input type="checkbox" class="calendar__checkInput" data-type='1' id="">
      <span class="calendar__checkBlock">
        <img src="./assets/img/check.svg" alt="" class="svg calendar__checkIcon">
      </span>
      <span class="calendar__name">Начало торгов </span>
      <span class="calendar__number">32</span>
    </label>
  <label for="" class="calendar__type calendar__type_lightBlue">
      <input type="checkbox" class="calendar__checkInput" data-type='2' id="">
      <span class="calendar__checkBlock">
        <img src="./assets/img/check.svg" alt="" class="svg calendar__checkIcon">
      </span>
      <span class="calendar__name">Окончание тихого периода</span>
      <span class="calendar__number">17</span>
    </label>
  <label for="" class="calendar__type calendar__type_yellow">
      <input type="checkbox" class="calendar__checkInput" data-type='3' id="">
      <span class="calendar__checkBlock">
        <img src="./assets/img/check.svg" alt="" class="svg calendar__checkIcon">
      </span>
      <span class="calendar__name">Lockup (6 мес)</span>
      <span class="calendar__number">14</span>
    </label>
  <label for="" class="calendar__type calendar__type_yellow">
      <input type="checkbox" class="calendar__checkInput" data-type='4' id="">
      <span class="calendar__checkBlock">
        <img src="./assets/img/check.svg" alt="" class="svg calendar__checkIcon">
      </span>
      <span class="calendar__name">Lockup (3 мес)</span>
      <span class="calendar__number">10</span>
    </label>
  <label for="" class="calendar__type calendar__type_blue">
      <input type="checkbox" class="calendar__checkInput" data-type='5' id="">
      <span class="calendar__checkBlock">
        <img src="./assets/img/check.svg" alt="" class="svg calendar__checkIcon">
      </span>
      <span class="calendar__name">Отчетный день</span>
      <span class="calendar__number">15</span>
    </label>
</div>

И таких блоков несколько, и каждый из таких блоков расположен в разных calendarBlock__slide. Id у всех элементов уникальный

Answer 1

Updated. После непродолжительной беседы. Пришлите к ответу.

clicking on a LABEL will bubble-up a click event. The solution appears to be to check to see if the event was triggered by the label

Решение, нужно проверить, было ли событие инициировано меткой.

let labels = document.querySelectorAll('.calendar__type');
labels.forEach(item => {
  item.addEventListener('click', (event) => {
    if(event.target.nodeName == 'LABEL'){
       console.log(item)
       item.classList.toggle('active');
    }
  })
})

БЛОГ НА HUSL

addEventListener вызывается два раза при переборе через forEach

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