Question

在以下代码段中，为什么export default connect(mapStateToProps, null)(signInForm);在点击divClicked()时触发两次，但在<label>时仅一次点击了吗？

<input>

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

注意：我想知道为什么这种情况发生，而不是“快速解决”，例如：在标签上放置onclick（）。< / p>

Answer 1

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

例如，在单击复选框标签的平台上检查复选框，点击以下代码段中的label即可触发 input上的运行合成点击激活步骤的用户代理元素，就好像元素本身已被用户触发：
<label><input type=checkbox name=lost> Lost</label>
在其他平台上，行为可能只是为了集中控件，或什么都不做。

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

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

Answer 2

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

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

现在，关系就是当你点击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内一样。这会bubble input上label上的child事件，就像parent到3.times.map do Thread.new do # Expect 3 differnt results from each thread p Time.now.precis_time end end.each(&:join)上的任何事件一样

Answer 3

有时，还要检查javascript文件资产是否未加载两次...。这应该不会发生，但您永远不会知道。

Javascript点击事件触发两次

3 个答案: