Javascript点击事件触发两次

Question

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 .

Answer 1

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

Answer 2

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

Answer 3

在某些时候，还要检查 javascript 文件资产是否没有加载两次......它不应该发生，但你永远不知道。