为什么监听器激活两次？

Question

我有以下 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>

我写了下面的监听器：

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

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

为什么？

Answer 1

我认为您的情况正在发生冒泡。阅读 Bubbling and Capturing

Answer 2

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

在 fiddle 上，它似乎是与 ...

重叠的 [a] 元素

Answer 3

不确定为什么，但 mouseup 有效。

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

Answer 4

单击 label 会自动在其中的 input 上创建一个单击事件。

假设您所有的标签都有输入，您可以简单地更改为：

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

Fiddle

为什么监听器激活两次？

Why does listener activate twice?

javascript

jquery

listener