Javascript事件侦听器在单击label元素内的文本时触发两次

如何使函数在单击标签内的文本时不触发两次

如果我使用event.preventDefault，那么用于选中复选框的基本浏览器功能也将停止工作

const label=document.querySelector'.parent'； label.addEventListener'click'，handleLabelClick； 函数handleLabelClickevent{ 控制台。记录“点击” } 选择我

---

据我所知，您希望单击.parent元素来触发一个单击处理程序，但不希望该处理程序因与.parent中的复选框或其标签相关的单击而触发

有两种方法可以做到这一点：

为调用StopRoPagation的标签添加处理程序，或

在事件处理程序中检查事件是否通过标签

以下是方法1：

const parent=document.querySelector'.parent'； parent.addEventListener'click'，handleLabelClick； //停止标签或复选框中的单击传播到父对象 parent.querySelectorlabel.addEventListenerclick，functionevent{ 事件。停止传播； }; 函数handleLabelClickevent{ console.log“单击”； } .家长{ 边框：1px实心ddd； } 选择我

---

这是一种标准的浏览器行为

属性指定给，所以当单击元素时，浏览器将在实际单击之后立即模拟单击元素

---

从好的方面来说，这可以让@KlaudioMilankovic成为焦点-我恐怕不明白你在描述什么。所以，让我们假设SelectMe是它自己的一个组件，你把它放在另一个名为“parent”的组件中。将事件侦听器附加到父级并单击标签后，它将触发两次而不是一次。我尽量不去处理标签上的点击，因为这是由浏览器完成的。@KlaudioMilankovic-我想我明白了。因此，在您的示例中，您希望handleLabelClick为与复选框无关的单击而激发，而不是为与复选框相关的单击而激发？没错。我想保留复选框的默认浏览器功能，但不想让它触发两次附加到父项的my函数。@KlaudioMilankovic-很好。我已经更新了答案。谢谢@papo！我只是问，实际上是从观察这种行为开始的。你对“为什么”的解释为我澄清了一些事情。