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>这是我的代码，当我单击“文本”时，它会提醒您两次，但是当我单击该框时，该onclick元素只会触发一次，为什么？
当您单击标签时，它会触发单击处理程序，您会收到警报。
但是点击标签也会自动向关联的输入元素发送点击事件，因此这被视为点击复选框。然后事件冒泡会导致在包含元素（即标签）上触发 click 事件，因此您的处理程序将再次运行。
如果您将 HTML 更改为此，您将不会收到双重警报：
<input id="wowcb" type="checkbox" name="checkbox" value="value">
<label id="wow" for="wowcb">Text</label>
标签现在使用for属性与复选框相关联，而不是环绕它。
如果您只想响应标签上的点击而不是复选框上的点击，您可以查看event.target属性。它引用调用侦听器的元素，以便如果单击不在该元素上，则不要执行操作：
window.onload = function(){
var el = document.getElementById('wow');
el.addEventListener('click', function(event) {
if (this === event.target) {
/* click was on label */
alert('click was on label');
} else {
/* click was on checkbox */
event.stopPropagation();
return false;
}
}, false);
}
另一方面，如果您只想响应点击复选框（点击标签也会产生点击复选框），然后执行相反的操作。对标签上的点击什么也不做，让复选框中的点击通过：
window.onload = function(){
var el = document.getElementById('foolabel');
el.addEventListener('click', function(event) {
if (this === event.target) {
/* click was on label */
event.stopPropagation();
return false;
} else {
/*
** click is from checkbox, initiated by click on label
** or checkbox
*/
alert('click from checkbox');
}
}, false);
}
这个版本似乎有最自然的行为。但是，更改标记以使标签不再包裹复选框将意味着不会调用侦听器。
事件气泡。
复选框是标签的子节点。您单击复选框。事件气泡到标签。然后警报弹出两次。
单击复选框时防止警报弹出两次。您可以将 onclick 功能更改为：
wow.onclick = function(e){
alert('hi');
stopBubble(e);
}
function stopBubble(e)
{
if (e && e.stopPropagation)
e.stopPropagation()
else
window.event.cancelBubble=true
}
希望这对你有用。
Label 标签将与其中的输入标签相关联。所以当你点击标签时，它也会触发输入的点击事件，然后冒泡到标签本身。
看到这个：
document.getElementById("winput").addEventListener('click', function(event){
alert('input click');
//stop bubble
event.stopPropagation();
}, false);
再次一头扎进这个陷阱并决定证明它对自己做了什么，希望能帮助我记住。为了帮助未来的人，上面可能不够清楚，这里是我做的例子。
https://jsfiddle.net/ashes/0bcauenm/
$(".someBigContainer").on("click", "input[type=checkbox]", ()=> {
$output.val("Clicked: checkbox\n" + $output.val());
});
编辑：添加了带有代码片段的链接。