为什么这个 eventListner 回调 function 运行了两次

Question

 const addons = document.querySelectorAll('.addon'); const toggleAddon = (e, addon) => { console.log(addon); console.log(addon.querySelector('input').checked); if (addon.querySelector('input').checked) addon.classList.remove('selected-plan'); else addon.classList.add('selected-plan'); }; addons.forEach((addon) => { addon.addEventListener('click', (e) => toggleAddon(e, addon)); });

 <label> <div class="addon addon-2 selected-addon"> <input type="checkbox" name="addon-2" class="addon-chkbox" id="larger-storage"> <div class="addon-info"> <h3 class="addon-name">Larger Storage</h3> <p class="addon-features">Extra 1TB of cloud save</p> </div> <div class="addon-pricing-box"> <h3 class="addon-pricing">$2/mo</h3> </div> </div> </label>

Why when I click on this element, the function toggleAddon() runs twice and in first run console.log(addon.querySelector('input').checked) comes false and on second it comes true . Thanks for the help.

This is another simplified example that will better show what I'm pointing out:

 let counter = 0; document.querySelector('.addon').addEventListener('click', event =>{ console.log(`[${++counter}]`); console.log(event.target); });

 <label> <div class="addon"> <input type="checkbox"> <div class="addon-info"> <h3 class="addon-name">Click here</h3> </div> </div> </label>

Answer 1

The problem is with the <label> element, when it is clicked, it trigger another click event on the input element within.

I suggest using change event instead.

check it in codesandbox .

Answer 2

The whole label is for the input? so why not listen to the input click event only which will automatically be handled by the label? like:

 let counter = 0; document.querySelector('.addon-input').addEventListener('click', event =>{ console.log(`[${++counter}]`); console.log(event.target); });

 <label> <div class="addon"> <input class="addon-input" type="checkbox"> <div class="addon-info"> <h3 class="addon-name">Click here</h3> </div> </div> </label>

Answer 3

As @Felix Kling mentioned, try to modify the related code like this and check what will happen:

addons.forEach((addon) => {
  console.log( addon.getAttribute("ever-bound") );
  addon.setAttribute("ever-bound", "1"); //may be not work, it means to save some state on the element
  if( ... ) return;
  addon.addEventListener('click', (e) => toggleAddon(e, addon));
});