代码之家 › 专栏 › 技术社区 › 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>

推荐文章

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

4 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

4 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

4 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

5 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

5 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

5 月前

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

5 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

5 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

5 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

5 月前