父级禁止点击而子级可点击可通过pointer-events实现。1. 父元素设pointer-events: none，子元素设auto以恢复响应；2. 可用CSS选择器对特定子元素批量控制；3. 适用于遮罩层局部操作、图文布局等场景；4. 注意现代浏览器支持良好，老版IE需JS替代方案。示例中点击子级触发事件，父级无反应，实现清晰的交互分离。
要实现父级元素禁止点击但子级可以正常响应点击事件，可以通过 pointer-events 属性配合 CSS 选择器来控制。关键是让父级不捕获鼠标事件，而子元素重新启用事件响应。
1. 使用 pointer-events: none + 子元素显式开启
将父元素设置为 pointer-events: none，这样它自身及其所有后代默认都不会触发鼠标事件。然后对需要响应点击的子元素单独设置 pointer-events: auto 或具体值（如 all），使其重新获得交互能力。
注意：即使父级设置了 none，子元素仍可通过此方式“恢复”事件响应。
示例代码：
立即学习“前端免费学习笔记（深入）”；
.parent {
pointer-events: none; /* 父级不响应任何指针事件 */
background: #f0f0f0;
padding: 20px;
}
.child {
pointer-events: auto; /* 显式开启子元素的事件响应 */
cursor: pointer;
}HTML 结构：
父级不可点击可点击的子级
此时点击“父级不可点击”区域无反应，点击“可点击的子级”会弹出提示。
2. 配合 CSS 选择器精确控制多个子元素
如果父容器中有多个需要响应事件的子项，可以用更灵活的选择器批量处理。
例如只允许特定类名的子元素可点击：
.container {
pointer-events: none;
}
.container .clickable {
pointer-events: auto;
}这样只有带有 clickable 类的子元素才能被点击。
3. 常见应用场景
- 遮罩层中局部可操作：比如在半透明遮罩上保留某个按钮可点。
- 图文混合布局：父容器作为装饰性背景禁用交互，文字或按钮仍可点击。
- 防止误触父容器：避免点击空白区域触发本不该有的行为。
4. 注意事项与兼容性
pointer-events 在现代浏览器中支持良好（IE11+，主流移动端均支持），但若需兼容老版本 IE，需考虑 JavaScript 替代方案（如事件委托+判断目标元素）。
不要依赖 display:none 或 visibility:hidden 来控制事件，它们不影响 pointer-events 的逻辑。基本上就这些。通过组合使用 pointer-events 和选择器，能干净地分离父级与子级的交互控制，无需复杂 JS 干预。
