Почему клик по label срабатывает 2 раза

Question

Вывожу текст 'click' по клику на label с классом .product-switcher

document.querySelector('.product-switcher').addEventListener('click', () => {
    console.log('click');
})

<label class="product-switcher">
  <input type="checkbox">
   <div class="product-switcher-current"></div>
   <div class="product-switcher-left">2,5 кг</div>
   <div class="product-switcher-right">25 кг </div>
</label>

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

Answer 1

Двойное срабатывание происходит потому, что <label>, в данном случае, является одновременно и управляющим элементом и родителем для <input>. Поэтому первый click - это по самому элементу, а второй - это всплытие от <input>.

document.querySelector('.product-switcher').addEventListener('click', () => {
  console.log('click label');
});
document.querySelector('.product-switcher input').addEventListener('click', () => {
  console.log('click input');
});

<label class="product-switcher">
    <input type="checkbox">
    <div class="product-switcher-current"></div>
    <div class="product-switcher-left">2,5 кг</div>
    <div class="product-switcher-right">25 кг</div>
</label>

Чтобы предотвратить двойное срабатывание, нужно прервать всплытие от <input>-а:

document.querySelector('.product-switcher').addEventListener('click', () => {
  console.log('click label');
});
document.querySelector('.product-switcher input').addEventListener('click', (ev) => {
  ev.stopPropagation();
  console.log('click input');
});

<label class="product-switcher">
    <input type="checkbox">
    <div class="product-switcher-current"></div>
    <div class="product-switcher-left">2,5 кг</div>
    <div class="product-switcher-right">25 кг</div>
</label>

БЛОГ НА HUSL

Почему клик по label срабатывает 2 раза

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