javascript - 为什么 onclick 元素会为 label 元素触发两次

Question

      window.onload = function(){
         var wow = document.getElementById("wow");
    	 wow.onclick = function(){
    	     alert("hi");
    	 }
      }

    <label id="wow"><input type="checkbox" name="checkbox" value="value">Text</label>

这是我的代码，当我点击“文本”时它会提示 hi 两次但是当我点击该框时，onclick 元素只会触发一次，为什么？

Answer 1

当您点击标签时，它会触发点击处理程序，您会收到警报。

但点击标签也会自动向关联的输入元素发送点击事件，因此这被视为点击复选框。然后事件冒泡导致在包含元素(即标签)上触发点击事件，因此您的处理程序再次运行。

如果您将 HTML 更改为此，您将不会收到双重警报:

<input id="wowcb" type="checkbox" name="checkbox" value="value">
<label id="wow" for="wowcb">Text</label>

标签现在使用 for 属性与复选框相关联，而不是环绕它。

DEMO