代码之家 › 专栏 › 技术社区 › volna

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

html javascript

volna · 技术社区 · 6 年前

使用输入可以发现以下行为。当标签附加到输入时 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>

4 回复 | 直到 6 年前

Vladimir Proskurin 6 年前

对这两个元素进行单击处理。

document.addEventListener(`click`, onClick)

var counter = 0;

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

Ankit Agarwal 6 年前

你需要使用 event.preventDefault(); 防止 click 对于下一个项目,它将触发默认单击,即 input 元素。但请注意,这将阻止单击链中的所有元素,这最终将阻止 点击 其他元素可能需要的链。

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>

Laura Landuyt 6 年前

标签是嵌套项,每个项都将触发事件。

一个关于如何防止它的模拟问题已经被回答[这里]。( jQuery Click fires twice when clicking on label )

Alexandre Annic 6 年前

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

你可以用 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>

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前