通过 javascript 监听父容器点击并判断是否真正触发了 checkbox 状态变化，可精准区分用户意图：仅当点击未导致 checkbox 切换时才执行 alert，从而实现“仅非 checkbox 区域可触发弹窗”的效果。
在嵌套结构中，若为父级
绑定 onclick=”alert(‘test’)”，而子元素是 ，默认行为会导致每次点击 checkbox（包括标签区域）都触发 alert——这违背了“仅点击文本区域才弹窗”的交互预期。
直接使用 pointer-events: none 或 z-index 并不能可靠解决该问题：
- pointer-events: none 会禁用 checkbox 自身的点击响应，使其无法勾选；
- z-index 在无定位上下文中无效，且无法改变事件捕获/冒泡逻辑。
✅ 正确解法是利用事件委托 + 状态比对：监听父容器点击，记录 checkbox 的前一状态，并在点击后立即比对。若状态未变（说明点击发生在非 checkbox 区域），再执行业务逻辑（如 alert）；若状态已变（说明用户明确点击了 checkbox），则跳过。
以下是完整、健壮的实现示例：
