本文介绍在嵌套结构中阻止父元素点击事件触发、仅使复选框自身响应点击的解决方案，通过监听父容器点击并智能判断是否由复选框状态变更引发，从而实现精准事件控制。
在 Web 开发中，常遇到这样的布局需求：一个
容器绑定全局点击行为（如弹出提示），但其内部包含一个 ，期望用户点击复选框时仅切换选中状态，不触发父级 alert。直接使用 pointer-events: none 会禁用复选框自身交互；盲目设置 z-index 也无法解决事件冒泡本质问题。
正确思路是：保留事件监听，但通过状态比对过滤掉由复选框操作引发的点击。以下是推荐实现：
<div id="myDiv"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. <input id="myCheckbox" type="checkbox"> </div>
const checkbox = document.getElementById('myCheckbox');
const div = document.getElementById('myDiv');
let checkboxPrevState = checkbox.checked;
div.addEventListener('click', (event) => {
// 检查点击是否发生在复选框上（可选增强：event.target === checkbox）
if (event.target === checkbox) return;
const checkboxCurrentState = checkbox.checked;
if (checkboxPrevState === checkboxCurrentState) {
// 复选框状态未变 → 确认为用户点击了 div 其他区域
alert('test');
}
checkboxPrevState = checkboxCurrentState;
});
✅ 关键优化点说明：
