当点击标签元素内的文本时，Javascript事件监听器会触发两次。

Question

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

如果我使用event.preventDefault()，那么基本的浏览器功能将无法正常工作，无法选中复选框。

const label = document.querySelector('.parent');

label.addEventListener('click', handleLabelClick);

function handleLabelClick(event) {
  console.log('Clicked')
}

<div class="parent">
  <label for="option1">
    <span>Select me</span>
    <input id="option1" type="checkbox">
  </label>
</div>

- Klaudio Milankovic

Answer 1

我理解您希望在单击 .parent 元素时触发单击处理程序，但不希望该处理程序针对与位于 .parent 内的复选框或其标签相关的单击事件生效。

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

1. 为 label 添加处理程序，并调用 stopPropagation，或者

2. 在事件处理程序内检查事件是否通过了 label

以下是第一种方法的示例代码：

const parent = document.querySelector('.parent');

parent.addEventListener('click', handleLabelClick);

// Stop clicks in the label or checkbox from propagating to parent
parent.querySelector("label").addEventListener("click", function(event) {
  event.stopPropagation();
});

function handleLabelClick(event) {
 console.log('Clicked');
}

.parent {
  border: 1px solid #ddd;
}

<div class="parent">
  <label for="option1">
    <span>Select me</span>
    <input id="option1" type="checkbox">
  </label>
</div>

以下是第二种方法：

const parent = document.querySelector('.parent');

parent.addEventListener('click', handleLabelClick);

function handleLabelClick(event) {
  const label = event.target.closest("label");
  if (label && this.contains(label)) {
    // Ignore this click
    return;
  }
 console.log('Clicked');
}

.parent {
  border: 1px solid #ddd;
}

<div class="parent">
  <label for="option1">
    <span>Select me</span>
    <input id="option1" type="checkbox">
  </label>
</div>

- T.J. Crowder

---

@KlaudioMilankovic - 很抱歉，我不明白你在描述什么。 - T.J. Crowder

所以，假设<label for="option1" class="test"> <span>选择我</span> <input id="option1" type="checkbox"> </label> 是一个独立的组件，你将其放置在名为“parent”的其他组件中。一旦你将事件监听器附加到父级并单击标签，它会触发两次而不是一次。我试图不处理标签上的点击事件，因为这是由浏览器完成的。 - Klaudio Milankovic

@KlaudioMilankovic - 我想我明白了。所以在你的例子中，你希望 handleLabelClick 在与复选框无关的点击时触发，而不是在与复选框相关的点击时触发？ - T.J. Crowder

没错。我想保留复选框的默认浏览器功能，但不要让它触发两次附加到父级的函数。 - Klaudio Milankovic

@KlaudioMilankovic - 不错的交易。我已经更新了答案。 - T.J. Crowder

选项1是解决我的问题的方案。非常感谢！ - LReeder14

Answer 2

这是一种标准（不幸的）浏览器行为。

属性 `for` 将 `` 分配给 ``，因此当单击 `` 元素时，浏览器会在您的实际单击后模拟对 `` 元素的单击。

从好的方面来说，这允许焦点集中于 ``，切换 `` 或切换 ``。

但不幸的是，这也导致两个元素都发送了 `click` 事件。如果您正在监听父元素上的点击事件，则意味着您将收到一次“人类交互”两次。一次来自 ``，一次来自“已单击的元素”。

对于那些想知道的人， <input> 可以被放在 <label> 里面，你会得到更少的样式可能性，但你可以在复选框和文本之间单击。

将 <span> 和 <input> 放在 <label> 中实际上创建了一个很好的测试用例。
尝试从左到右单击；
在文本上，你将收到 SPAN + INPUT 事件，
在文本和复选框之间，你将获得 LABEL + INPUT 事件，
直接在复选框上只有 INPUT 事件，
然后靠右，只有 DIV 事件。 （因为 DIV 是块元素并延伸到整个右侧）

一种解决方案是仅监听 <input> 元素事件，但这样你将无法捕获 <div> 的点击事件，并且也无法将 <div> 放在 <label> 内。

最简单的做法是忽略对 <label> 的点击，以及 <label> 内所有可点击元素，除了 <input>。在这种情况下，是指 <span>。

const elWrapper = document.querySelector('.wrapper');

elWrapper.addEventListener('click', handleLabelClick);

function handleLabelClick(event) {
 console.log('Event received from tagName: '+event.target.tagName);
 if (event.target.tagName === 'LABEL' || event.target.tagName === 'SPAN') { return; }
 console.log('Performing some action only once. Triggered by click on: '+event.target.tagName);
}

<div class="wrapper">
  <label for="option1">
    <span>Select me</span>
    <input id="option1" type="checkbox">
  </label>
</div>

来自@T.J.的解决方案会导致对和其内部所有内容的事件被忽略。要使事件触发，您需要在

上的某个地方单击，但不能直接单击文本或复选框。

我添加了我的答案，因为我认为这不是OP的意图。

但即使对于这种情况，您也可以使用我提供的类似方法。检查点击的元素名称是否为DIV，然后允许进一步操作。我认为这更直接，更本地化（不影响事件传播），更通用（如果您选择捕获：addEventListener（...，...，true），这仍将起作用）

- papo

---

谢谢 @papo！我刚刚问了一个类似的问题，实际上是因为观察到这种行为。你对“为什么”的解释让我明白了事情的来龙去脉。 - Daniel Brady