pointer-events: none 可解决上层 DOM 遮挡下层可交互元素的点击问题，如模态遮罩、图表图例、拖拽手柄等场景，使事件穿透至底层，同时保留视觉效果；但需注意继承性、子元素需显式设 auto、移动端兼容性及渲染顺序影响。
pointer-events: none 能解决哪些真实点击被挡问题
它专治「看得见、点不着」：上层 DOM（比如半透明遮罩、装饰性 div、图表图例浮层）盖住了下层可交互元素（按钮、链接、input），但又不想隐藏上层视觉效果。设 pointer-events: none 后，鼠标/触控事件直接穿透，底层元素照常响应——布局、动画、透明度全都不动，只关掉事件拦截。
典型场景包括：
- 模态框背景遮罩层（
.modal-overlay）需点击关闭，但又不能挡住背后页面滚动或快捷键操作 - 图表叠加图例悬浮提示，提示框本身不可点，但下方折线/柱状图仍要支持 hover/click
- 拖拽手柄覆盖在可编辑区域上，拖拽时禁用底层文本选择或滚动
- 高亮聚焦状态的装饰边框（
outline或伪元素）意外拦截点击
为什么不能只写 pointer-events: none 就完事
因为 pointer-events 是继承属性，父层设了 none，所有子元素默认也失效——哪怕你有个 .close-btn 在遮罩内部，它也会点不了。
必须显式恢复关键子元素的交互能力：
- 给容器设
pointer-events: none - 给需要响应的子元素（如关闭按钮、拖拽句柄、图例项）单独加
pointer-events: auto - 不要依赖 z-index 或 opacity 来“绕过”事件拦截——它们无效
- 若子元素是
或，别试图用pointer-events: auto恢复焦点；这些表单控件本身不支持子元素接管 focus，得换结构（比如把 input 移到遮罩外层）
移动端和旧浏览器的兼容雷区
在 iOS Safari 上，pointer-events: none 对 touchstart / touchend 有效，但 Safari 15.4 之前不支持与 touch-action 协同；更麻烦的是：设了 none 的层下面如果压着一个 ，旧版 Safari 可能连软键盘都不弹。
安卓 WebView 也有坑：
- 嵌套多层
pointer-events: none（比如父 div → 子 div → span），部分 WebView 会穿透失败，事件卡在中间层 - 真机必测：在 iOS 上点被设为
none的区域，确认下层button是否真触发click - IE11 及以下完全不支持该属性，现代项目可忽略，但若需兼容，只能用 JS 手动转发事件（成本高，不推荐）
穿透顺序不是 DOM 顺序，而是渲染顺序
当多个绝对定位元素堆叠且都设了 pointer-events: none，事件穿透路径不由 HTML 结构决定，而由浏览器实际绘制顺序（paint order）控制——也就是 z-index、文档流位置、层叠上下文共同作用的结果。
这意味着：
- 用开发者工具的「Rendering」面板开启 “Paint flashing”，能直观看到哪一层真正接收了事件
- 别假设“DOM 里写在后面就一定在上面”，
z-index: 0的元素可能因层叠上下文被压在底下 - 复杂遮罩场景建议用绝对定位 + 显式
z-index分离图层，比靠pointer-events嵌套更可控
真正容易被忽略的是：当你调试一个多层穿透失效的问题时，往往不是属性写错了，而是没意识到事件正按渲染树顺序往下找第一个 auto 的接收者——它可能藏在你根本没想到的兄弟节点里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
