通过 javascript 监听父容器点击并判断是否真正触发了 checkbox 状态变化，可精准区分用户意图：仅当点击未导致 checkbox 切换时才执行 alert，从而实现“仅非 checkbox 区域可触发弹窗”的效果。
在嵌套结构中，若为父级 <div> 绑定 onclick="alert('test')"，而子元素是 <input type="checkbox">，默认行为会导致每次点击 checkbox（包括标签区域）都触发 alert——这违背了“仅点击文本区域才弹窗”的交互预期。
直接使用 pointer-events: none 或 z-index 并不能可靠解决该问题：
- pointer-events: none 会禁用 checkbox 自身的点击响应，使其无法勾选；
- z-index 在无定位上下文中无效，且无法改变事件捕获/冒泡逻辑。
✅ 正确解法是利用事件委托 + 状态比对：监听父容器点击，记录 checkbox 的前一状态，并在点击后立即比对。若状态未变（说明点击发生在非 checkbox 区域），再执行业务逻辑（如 alert）；若状态已变（说明用户明确点击了 checkbox），则跳过。
以下是完整、健壮的实现示例：
<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) => {
// 防止 label 关联点击被重复处理（可选增强）
if (event.target === checkbox || event.target.closest('label')) {
return; // 让 checkbox 自然响应，不干预
}
const checkboxCurrentState = checkbox.checked;
if (checkboxPrevState === checkboxCurrentState) {
alert('test'); // 仅当 checkbox 状态未改变时触发
}
checkboxPrevState = checkboxCurrentState;
});? 关键细节说明：
- 使用 let 声明 checkboxPrevState 确保状态可更新；
- 添加 event.target 判断可进一步排除 <label for="myCheckbox"> 等关联元素的误判；
- 无需阻止默认行为或事件传播，兼容原生 checkbox 交互（如空格键切换、屏幕阅读器支持）；
- 该方案完全基于标准 DOM API，无框架依赖，适用于任何现代浏览器。
? 进阶提示： 若需支持多 checkbox 或动态渲染，建议封装为函数并使用事件委托绑定到更高层级容器，同时通过 data-* 属性标识关联关系。
