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

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

html javascript

volna · 技术社区 · 7 年前

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

Vladimir Proskurin 7 年前

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

document.addEventListener(`click`, onClick)

var counter = 0;

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

Ankit Agarwal 7 年前

你需要使用 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 7 年前

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

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

Alexandre Annic 7 年前

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

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

7 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

7 月前

Alex · 在轻量级中同时解构和不解构变量

8 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

8 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

8 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

8 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

8 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

8 月前

user3472810 · Angular@Output/EventEmitter返回undefined

8 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

8 月前