pointer-events 是解决遮挡点击的首选方案，因其是唯一能精准控制某层是否参与鼠标事件捕获的原生 css 属性，不干扰布局、无需 js、兼容 ie11+ 及移动端全覆盖。
为什么 pointer-events 是解决遮挡点击的首选方案
因为它是唯一能精准控制“某层是否参与鼠标事件捕获”的原生 CSS 属性，不干扰布局、不依赖 JS、兼容性也足够好（IE11+，移动端全覆盖）。用 z-index 调层级或靠 transform 搬移位置都只是绕开问题，而 pointer-events 直接切断事件穿透链。
pointer-events: none 的实际行为和常见误用
它让元素完全不响应任何鼠标事件（click、hover、mousedown 等），且**事件会穿透到下层元素**——但仅限于视觉重叠区域。注意：它不影响子元素继承，除非子元素显式设为 auto。
- 错误写法：
div.overlay { pointer-events: none; }后，里面带按钮的子元素仍不可点（因为继承了none） - 正确做法：给需要交互的子元素单独加
pointer-events: auto - 慎用于表单控件：
input、textarea设为none后无法聚焦，键盘操作也失效 - 动画中动态切换时，需确保过渡帧不意外阻断事件（避免用
transition动pointer-events）
哪些场景必须配合 JS 使用 pointer-events
CSS 本身不能判断“当前鼠标是否真该触发底层逻辑”，所以遇到条件性穿透就得靠 JS 控制属性值。
- 模态框半透明遮罩层：遮罩设
pointer-events: none，但点击空白处要关闭弹窗 → 改用pointer-events: auto+click监听器，再event.target === overlay判断是否点在遮罩上 - 图表图例高亮联动：图例项 hover 时只让对应折线变粗，其他图层保持可点 → hover 时临时给非目标图层加
pointer-events: none，离开时还原 - 拖拽中禁用底层滚动：拖拽开始设
body { pointer-events: none }，结束立刻恢复，否则 iOS 上可能卡住 touch 事件
移动端 Touch 事件下的兼容细节
pointer-events 在 iOS Safari 和 Android Chrome 中对 touchstart/touchend 同样生效，但有个关键差异：Safari 15.4+ 才支持 touch-action 与 pointer-events 协同；旧版 Safari 遇到 none 层下的 input，可能连软键盘都不弹。
- 真机测试必做：在 iOS 上点被设为
none的区域，确认下层button是否真能click - 避免嵌套
none：父层none+ 子层auto在部分安卓 WebView 里仍有穿透失败案例，改用绝对定位+z-index分离图层更稳 - 如果要用
none实现“视觉存在但不可点”，记得同步处理键盘焦点逻辑（tabindex="-1"或移除tabindex）
pointer-events: none，事件穿透顺序不是按 DOM 顺序，而是严格按渲染树中的绘制顺序（paint order），也就是 z-index 和文档流位置共同决定的。调试时别只看 HTML 结构。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
