Javascript 为什么听者会激活两次？

我有以下html：

<ul id="all-terminals">

        <li data-terminal-id="101" class="">
            <label>
                <input type="radio" name="terminal" class="all" data-terminal-id="101">
                <a ...></a>

               ...
            </label>
        </li>

        <li data-terminal-id="100" class="active">
            <label>
                <input type="radio" name="terminal" class="all" data-terminal-id="100">
                <a ..></a>

               ...
            </label>
        </li>

        <li data-terminal-id="102" class="">
            <label>
                <input type="radio" name="terminal" class="all" data-terminal-id="102">
                <a...></a>

              ...
            </label>
        </li>
    </ul>

当我点击标签时，我看到警报执行两次

---

为什么？

我想你的情况是冒泡。

---

阅读

我不完全确定，但我认为当你点击标签时，你点击了它的两个子重叠元素。因为它们是标签的一部分，但仍然是单独的元素，所以它会在标签上触发两个单击事件

---

在小提琴上，似乎是[a]元素重叠了…

不确定原因，但

mouseup

起作用

$(document).on('mouseup', '#all-terminals li label', function(){alert(123)});

---

单击

标签

会自动在标签内的

输入

上创建一个单击事件

假设所有标签都有输入，您只需更改为：

$(document).on('click', '#all-terminals li input', function(event) {
  alert(123);
});

---

我无法复制。无法复制->不在Chrome中发生：我正在运行您的所有JSFiddle，并且收到两次警报…？尝试通过在警报后添加此项来防止事件冒泡：这是正常的还是我应该避免两次火灾？避免它将更好地使用

$（“#所有终端li标签”）

我应该避免这种行为吗？这就是导致问题的原因。通常这没关系，但在点击检测或悬停等情况下可能会导致问题。这是正确的答案。当前标记的答案是一种变通方法。@CyberneticWerkGuruorc请解释此变通方法的工作原理？@gstackoverflow答案（通过CrazyPaste）正在将事件类型从

单击更改为
鼠标操作。这是一个变通办法。Rick Hitchcock正在修复
单击事件，并解释为什么这是正确的解决方案。
$(document).on('click', '#all-terminals li input', function(event) {
  alert(123);
});