為什么偵聽器激活兩次？

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)});

當我單擊標簽時，我看到警報執行了twise。

為什么？

Answer 1

單擊label自動在其中的input上創建click事件。

假設所有標簽都有輸入，則只需更改為：

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

小提琴

Answer 2

不確定原因，但是mouseup可以工作。

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

Answer 3

我認為您的情況正在冒泡。 閱讀有關冒泡和捕獲的信息

Answer 4

我不太確定，但是我認為當您點擊標簽時，您點擊了其子重疊元素中的2個。 由於它們是標簽的一部分，但仍是單獨的元素，因此會在標簽上觸發兩個click事件。

在小提琴上，似乎是[a]元素與...重疊