In the following snippet, why does divClicked() trigger twice when the <label> is clicked, but only once when <input> is clicked?

function divClicked(_index) {
  console.log("div click event");
}

function inputClicked(_index) {
  console.log("input click event");
}

<div class="option" onclick="divClicked(1)">
  <input id="1_1" name="group_1" type="radio" value="1" onclick="inputClicked(1)" />
  <label for="1_1">label</label>
</div>

In the following snippet, why does divClicked() trigger twice when the <label> is clicked, but only once when <input> is clicked?

function divClicked(_index) {
  console.log("div click event");
}

function inputClicked(_index) {
  console.log("input click event");
}

<div class="option" onclick="divClicked(1)">
  <input id="1_1" name="group_1" type="radio" value="1" onclick="inputClicked(1)" />
  <label for="1_1">label</label>
</div>

Note: I want to know why this happens, not a "quick fix" like: put onclick() on label.

• javascript
• html

• 1 @NishanthMatha Not sure how this is a dup of that because no where in that question are events attached to the containing div. – Zze Commented Apr 3, 2017 at 0:43
• 1 @NishanthMatha How is present Question a duplicate of linked Question? – guest271314 Commented Apr 3, 2017 at 0:43
• 2 @NishanthMatha But the div event handler is executing twice, not the input handler – Andrew Li Commented Apr 3, 2017 at 0:49
• 1 @NishanthMatha How does that explain why divClicked is called twice at present Question at click at label element? – guest271314 Commented Apr 3, 2017 at 0:51
• 1 @Zze Corrected addressee of comment – guest271314 Commented Apr 3, 2017 at 0:56

2 Answers 2

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>.

This is usually be cause of the bubbling principle of click event:

When an event happens on an element, it runs on it, its associated elements,its parent and other ancestors.

Now, The relation is when you click on label there a are two events which bubbles up here:

1) Click on div (which you expect)

2) Click on input (which is also expected)

2.1) When click on input is triggered then a click on div is also triggered again here

You can confirm this behavior by using event.bubbles prop.

EDIT:

The reason for the connection between label and input: (I know this is absolutely not required, as it's present all over the place yet)

A <label> can be associated with a control either by placing the control element inside the <label> element, or by using the for attribute. Such a control is called the labeled control of the label element. One input can be associated with multiple labels.

Taken from: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

Which means placing for on label referencing id of an input element will stimulate the behavior as if the element is inside the label. This would bubble a event on input onto label like any event on child to parent