如何仅使目标元素可点击：点击复选框不触发父级alert

问题出在DOM事件冒泡——点击复选框后，事件会顺着DOM树往上传递，触发父级div绑定的onclick弹窗。给你两个可行的解决办法：

方法一：内联事件阻止冒泡 #

直接给复选框加onclick事件，调用event.stopPropagation()终止事件传播：

<div onclick="alert('test')">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
    <input type="checkbox" onclick="event.stopPropagation()">
</div>

这样点击复选框时，事件不会冒泡到父div，自然不会触发alert。

方法二：非内联事件绑定（更规范） #

如果不想用内联事件，用addEventListener绑定事件，同样在复选框的点击事件里阻止冒泡：

<div id="parentDiv">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
    <input type="checkbox" id="myCheckbox">
</div>
<script>
// 给父div绑定点击事件
document.getElementById('parentDiv').addEventListener('click', () => {
  alert('test');
});
// 给复选框绑定点击事件，阻止冒泡
document.getElementById('myCheckbox').addEventListener('click', (e) => {
  e.stopPropagation();
});
</script>

另外说下你之前尝试的方法为啥没用：

• pointer-events: none会让复选框完全不响应鼠标事件，点击它等于直接点在下面的div上，反而会触发弹窗；
• z-index只控制元素的层叠显示顺序，根本不影响事件冒泡的逻辑，所以解决不了问题。

内容的提问来源于stack exchange，提问作者ABJ