Why the onclick element will trigger twice for label element

Question

      window.onload = function(){           var wow = document.getElementById("wow");      	 wow.onclick = function(){      	     alert("hi");      	 }        }

    <label id="wow"><input type="checkbox" name="checkbox" value="value">Text</label>

This is my code, when I clicked on "Text" it will alert hi twice but when I clicked on the box, the onclick element will only trigger once, why?

Answer 1

When you click on the label, it triggers the click handler, and you get an alert.

But clicking on a label also automatically sends a click event to the associated input element, so this is treated as a click on the checkbox. Then event bubbling causes that click event to be triggered on the containing element, which is the label, so your handler is run again.

If you change your HTML to this, you won't get the double alert:

<input id="wowcb" type="checkbox" name="checkbox" value="value"> <label id="wow" for="wowcb">Text</label> 

The label is now associated with the checkbox using the for attribute instead of wrapping around it.

DEMO

Answer 2

If your intention is to respond only to clicks on the label and not on the checkbox, you can look at the event.target property. It references the element that called the listener so that if the click wasn't on that element, don't to the action:

window.onload = function(){   var el = document.getElementById('wow');   el.addEventListener('click', function(event) {      if (this === event.target) {       /* click was on label */       alert('click was on label');      } else {       /* click was on checkbox */       event.stopPropagation();       return false;     }    }, false); } 

If, on the other hand, you want to only respond to clicks on the checkbox (where a click on the label also produces a click on the checkbox), then do the reverse. Do nothing for clicks on the label and let ones from the checkbox through:

window.onload = function(){   var el = document.getElementById('foolabel');   el.addEventListener('click', function(event) {      if (this === event.target) {       /* click was on label */       event.stopPropagation();       return false;      } else {        /*       ** click is from checkbox, initiated by click on label       ** or checkbox                                         */        alert('click from checkbox');     }    }, false); } 

This version seems to have the most natural behaviour. However, changing the markup so that the label no longer wraps the checkbox will mean the listener is not called.