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>

Answer 1

对两个元素都进行了单击。

document.addEventListener(`click`, onClick)

var counter = 0;

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

Answer 2

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

您可以使用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>

Answer 3

您需要使用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>

Answer 4

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

关于如何预防的类似问题已经在[here]（jQuery Click fires twice when clicking on label）

中得到了回答。

单击输入的标签会触发两次单击

4 个答案: