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 元素只会触发一次，为什么？
【问题讨论】：
标签： javascript html
当您点击标签时，它会触发点击处理程序，并且您会收到警报。
但是点击标签也会自动向关联的输入元素发送点击事件，因此这被视为点击复选框。然后事件冒泡会导致在包含元素（即标签）上触发单击事件，因此您的处理程序会再次运行。
如果您将 HTML 更改为此，您将不会收到双重警报：
<input id="wowcb" type="checkbox" name="checkbox" value="value">
<label id="wow" for="wowcb">Text</label>
标签现在使用for 属性与复选框相关联，而不是环绕它。
【讨论】：
<input>，而不是标签上。这是一种奇怪的行为，我不确定我能想出它有用的原因。
如果您的意图是只响应标签上的点击而不是复选框上的点击，您可以查看 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);
}
这个版本似乎有最自然的行为。但是，更改标记以使标签不再包裹复选框将意味着不会调用侦听器。
【讨论】：
事件气泡。
复选框是标签的子节点。您单击复选框。标签的事件气泡。然后alert弹出两次。
为了防止在您单击复选框时弹出两次警报。您可以将 onclick 功能更改为：
wow.onclick = function(e){
alert('hi');
stopBubble(e);
}
function stopBubble(e)
{
if (e && e.stopPropagation)
e.stopPropagation()
else
window.event.cancelBubble=true
}
希望这对你有用。
【讨论】：
<label> 标记的事件处理程序应该只接收一次冒泡事件。浏览器生成两个“点击”事件，一个以<input>元素为目标，一个以<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());
});
编辑：添加了带有代码片段的链接。
【讨论】：
这可能是最简单的答案。只需在文本周围添加一个跨度并停止事件传播。
window.onload = function(){
var wow = document.getElementById("wow");
wow.onclick = function(){
alert("hi");
}
}<label id="wow">
<input type="checkbox" name="checkbox" value="value">
<span onclick="event.stopPropagation()">Text</span>
</label>或者没有 inline-javaScript
window.onload = function(){
var wow = document.getElementById("wow");
wow.onclick = function(){
alert("hi");
}
var span = document.getElementsByTagName("span")[0];
span.onclick = function(event){
event.stopPropagation();
}
}<label id="wow">
<input type="checkbox" name="checkbox" value="value">
<span>Text</span>
</label>【讨论】：
对于那些使用 React 和 Material UI 的人 - 我在我的一个表单上遇到了这个问题。 event.preventDefault() 正在阻止事件冒泡，如接受的答案所述。
<Button
onClick={(event) => {
event.preventDefault()
this.handleCardClick(planName)
}}
>
<FormControl component="fieldset">
<RadioGroup
row
value={selectedPlan}
>
<FormControlLabel
control={<Radio color="secondary" />}
label={label}
/>
</RadioGroup>
</FormControl>
</Button>
【讨论】：
使用change 代替click 来监听事件
【讨论】：