Why the Onclick Element Will Trigger Twice For Label Element

Why the onclick element will trigger twice for label element

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

Why is the onClick event triggered twice?

It is calling twice because button is inside a span and span has onclick="alert('Boem')", hence when you trigger click on button then it shows alert and same click event propagate to span and shows alert once again.

you need to stop default behaviour of button using below code :

$(function(){
$('#test1').click(function(e){e.preventDefault();}).click();
});

Demo

Javascript click event triggers twice

This happens because of what the HTML spec describes at 4.10.4:

For example, on platforms where clicking a checkbox label checks the
checkbox, clicking the label in the following snippet could trigger
the user agent to run synthetic click activation steps on the input
element, as if the element itself had been triggered by the user:

<label><input type=checkbox name=lost> Lost</label>

On other platforms, the behavior might be just to focus the control,
or do nothing.

This means that when a <label> is clicked, the browser creates a second "synthetic" click event on the associated <input> element, in order to toggle its state.

The reason divClicked is triggered twice, is because the first event which comes from the <label> bubbles up to the <div>, and also the second, synthetic click event bubbles up to the <div>.

Why onclick is being triggered twice?

When you click on the label, it triggers the checkbox`s click event.

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.

put the checkbox outside the label like so

<label></label>
<input type="checkbox">

UPDATE : you can also do as @Rejith R Krishnan suggested and set the click event handler on the checkbox and not the label

Why does html label for trigger callback on containing div twice?

This is because label is an interactive element. When clicked it triggers an activation event on its associated element. This activation event usually causes a click event, so you get two clicks instead of one. One for the actual user click and one caused by the activation event.

http://www.w3.org/TR/html5/forms.html#the-label-element

For example, on platforms where clicking a checkbox label checks the
checkbox, clicking the label in the following snippet could trigger
the user agent to run synthetic click activation steps on the input
element, as if the element itself had been triggered by the user:

<label><input type=checkbox name=lost> Lost</label>

On other
platforms, the behavior might be just to focus the control, or do
nothing.

While the example from the docs shows an onClick for the input element, the event would bubble up so in your case your div gets the bubbled click event

Interactive-content doc

To prevent this you can prevent the default action, or use stopPropagation to stop the event from bubbling up.

Inline

<label onclick="return false;" for='foo-pie'>Pick Foo:</label>

in code

HTML

<label id="foolabel" for='foo-pie'>Pick Foo:</label>

JS

document.getElementById("foolabel").addEventListener(function(e){
   e.preventDefault(); //Or
   e.stopPropagation();
});

Example

<div id='foo' onClick="alert('clicked')">  <label onclick="event.stopPropagation();" for='foo-pie'>Pick Foo:</label>  <select id='foo-pie' name='wat[wat]'>    <option value='pie'>Foo</option>  </select></div>

document.addEventListener(`click`, onClick)

var counter = 0;

function onClick(event) {
  event.preventDefault();
  ++counter
  console.log(counter)
}

$(':checkbox').on('change', function() {  if (this.checked) {    console.log('input checked')  } else {    console.log('unchecked')  }});

.test {  height: 150px;  width: 150px;  background: red;  display: block;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><label class="test">  <input type="checkbox" name=""></label>

<label for="test" data-bind="stopBubble:parentAction">TestLabel</label>