本文介绍在嵌套结构中阻止父级元素点击事件触发、仅允许子元素（如复选框）响应用户交互的解决方案，通过事件状态监听与条件拦截实现精准控制。
在 Web 开发中，常遇到这样的布局需求：一个可点击的容器（如
）内嵌一个表单控件（如 ），且希望点击复选框时仅切换其选中状态，不触发父容器的 onclick 行为（例如 alert(‘test’)）。直接使用 pointer-events: none 或 z-index 无法根本解决——前者会使复选框本身失焦不可点，后者对事件冒泡无影响。
正确做法是放弃内联 onclick，改用 JavaScript 事件监听 + 状态比对，核心逻辑在于：仅当点击未导致复选框状态改变时，才执行父级逻辑。这是因为浏览器中复选框的 click 事件会在状态更新后同步触发，我们可通过对比点击前后的 checked 值判断本次点击是否“真正作用于复选框”。
以下是完整实现方案：
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
const checkbox = document.getElementById('myCheckbox');
const div = document.getElementById('myDiv');
let checkboxPrevState = checkbox.checked;
div.addEventListener('click', (event) => {
const checkboxCurrentState = checkbox.checked;
// 若复选框状态未变 → 点击落在非复选框区域（如文本），执行父级逻辑
if (checkboxPrevState === checkboxCurrentState) {
alert('test');
} else {
// 状态已变 → 点击命中复选框，仅更新记录，不触发 alert
checkboxPrevState = checkboxCurrentState;
}
});
✅ 关键优势：
