点击输入框标签触发两次点击事件

Question

使用输入框时发现以下行为。当使用for属性将标签附加到输入框上时，会发生两个单击事件。有人可以解释一下这种“异常”行为吗？

如果只点击标签，是否有办法防止在输入框上发生单击事件，当然是除去for属性的方法。

document.addEventListener(`click`, onClick)

var counter = 0;

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

label {
  display: block;
  background-color: lightgrey;
  margin: 5px 0 5px;
}

<input id='input'>
<label for='input'>I belong to input</label>
<label>I belong to no one</label>

- volna

Answer 1

第一次点击与标签相关，第二次点击与相关的输入有关。如您所见，在单击标签后，焦点设置在输入上。如果删除输入，则不会触发第二次点击。这是浏览器的正常行为。

你可以使用event.preventDefault();来防止这种情况发生。

document.addEventListener(`click`, onClick)

var counter = 0;

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

label {
  display: block;
  background-color: lightgrey;
  margin: 5px 0 5px;
}

<input id='input'>
<label for='input'>I belong to input</label>
<label>I belong to no one</label>

- Alexandre Annic

---

Alexandre，感谢您的答复和所做的编辑;) - volna

Answer 2

标签是一个嵌套项，每个项都会触发事件。

如何防止它的类似问题已经在这里得到解答(jQuery 点击标签时触发两次单击事件)

- Laura Landuyt

Answer 3

两个元素都会被处理点击事件。

document.addEventListener(`click`, onClick)

var counter = 0;

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

- Vladimir Proskurin

---

你可以将点击事件的处理分配给整个文档，然后对每个被点击的元素执行处理。元素标签会处理点击事件并将其发送到其属性 for 所指向的元素进行处理。为了防止当前点击事件的进一步处理，你必须运行 preventDefault 事件方法。 - Vladimir Proskurin

非常感谢您！:) - volna

volna 不用谢 :) - Vladimir Proskurin

Answer 4

您需要使用 event.preventDefault(); 来阻止下一个项目的 click，否则默认情况下会触发点击，这在您的情况下是 input 元素。但请注意，这将阻止链中所有元素的点击，最终可能会阻止您需要其他元素的 click 链。

document.addEventListener(`click`, onClick)

var counter = 0;

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

label {
  display: block;
  background-color: lightgrey;
  margin: 5px 0 5px;
}

<input id='input'>
<label for='input'>I belong to input</label>
<label>I belong to no one</label>

- Ankit Agarwal

---

@volna 很高兴能帮到你。如果有帮助的话，你可以打勾标记答案 :) - Ankit Agarwal