Javascript点击事件触发两次

Question

在以下代码段中，为什么divClicked()在单击<label>时触发两次，而在单击<input>时仅触发一次？

 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>

注意：我想知道为什么会发生这种情况，而不是“快速修复”，例如：将 onclick() 放在 label 上。

Answer 1

这是因为 HTML 规范在4.10.4 中的描述：

例如，在单击复选框标签检查复选框的平台上，单击以下代码段中的label可能会触发用户代理在input元素上运行合成点击激活步骤，就好像元素本身已被用户触发一样：

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

在其他平台上，行为可能只是为了集中控制，或者什么都不做。

这意味着当点击<label> ，浏览器会在关联的<input>元素上创建第二个“合成”点击事件，以切换其状态。

divClicked被触发两次的原因是因为来自<label>的第一个事件冒泡到<div> ，第二个合成点击事件冒泡到<div> 。

Answer 2

这通常是click事件bubbling原理的原因：

当一个事件发生在一个元素上时，它会在它、它的关联元素、它的父元素和其他祖先元素上运行。

现在，关系是当您单击label ，有两个事件会在此处冒泡：

1）点击div（你期望的）

2）点击输入（这也是预期的）

2.1) 当点击input被触发时，这里也会再次触发对div点击

您可以使用event.bubbles道具确认此行为。

编辑：

label和input之间连接的原因:(我知道这绝对不是必需的，因为它无处不在）

<label>可以通过将控件element inside the <label>元素内or by using the for属性与控件相关联。 这样的控件称为标签元素的标记控件。 一个输入可以与多个标签相关联。

摘自：https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

这意味着在标签上放置for引用输入元素的id将刺激行为，就好像元素在label 。 这会将input上的事件bubble到label就像child到parent任何事件一样

Answer 3

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