pointer-events: none仅对声明元素生效，需单独设于遮罩层而非父容器；opacity/visibility不阻断事件，须配合pointer-events: none；多层交互用:hover动态切换；ie11/ios safari需降级或硬件加速。
遮挡层加了pointer-events: none还是点不了下层？先查作用对象
它只对声明它的那个元素生效，不继承、不传播、不跨层。常见错误是把pointer-events: none写在父容器上，比如给.modal加，结果里面所有子元素（包括关闭按钮）全失活——但真正需要透传的只是遮罩层.modal-overlay本身。
正确做法是：定位遮挡层必须单独设pointer-events: none，且不能靠父级“代劳”。用开发者工具选中该层，看Computed里pointer-events是否为none，而不是只看Styles里有没有那行CSS。
- 错误：
.modal { pointer-events: none; }→ 整个弹窗不可交互 - 正确：
.modal-overlay { pointer-events: none; }→ 仅遮罩层透传 - 若遮罩层内有
.close-btn，必须额外加.modal-overlay .close-btn { pointer-events: auto; }
opacity: 0 或 visibility: hidden 的元素，为什么一定要配 pointer-events: none？
opacity和visibility只管“看得见与否”，不管“点不点得着”。浏览器仍把它当有效事件目标，hover、click照常触发，事件根本不会往下走。
比如一个淡入动画用opacity: 0 → 1，起始帧若没加pointer-events: none，鼠标悬停时会误触发该层的:hover，甚至挡住下层按钮点击。
-
opacity: 0+pointer-events: none：支持硬件加速、可做平滑过渡、真正禁用交互 -
visibility: hidden+pointer-events: none：保留布局空间，适合需维持DOM结构的场景（如SSR） -
display: none天然禁用交互，但会触发重排，且无法做CSS动画
两个绝对定位元素都要响应 hover/click，怎么同时生效？
不能全设none，得靠伪类动态切换事件接收权。典型场景：上层图例悬停高亮折线，同时底层图表仍可拖拽或点击数据点。
关键不是“谁在上面”，而是“当前谁该收事件”。用:hover临时让上层透传，移出再恢复：
- 上层设：
.legend-item:hover { pointer-events: none; } - 下层显式声明：
.chart-area { pointer-events: all; }（避免被意外继承覆盖） - 注意滚动：若下层是可滚动容器（如
overflow: auto），pointer-events: all是必需的，否则滚轮事件也会被阻断
IE11 和 iOS Safari 的兼容性坑，绕不开就得降级
pointer-events: none在IE11对普通HTML元素不原生支持（仅SVG可用），iOS Safari在快速滚动后偶发事件丢失——这不是代码写错，是渲染管线限制。
真要兼容IE11，别硬扛：用display: none配合JS模拟淡入淡出；iOS问题则优先加will-change: transform或transform: translateZ(0)触发硬件加速。
真正容易被忽略的是层叠上下文干扰：某个父容器设了transform或opacity: 0.99，会创建新堆叠上下文，导致z-index和pointer-events行为偏离预期。调试时直接打开DevTools的「Rendering」面板，勾选“Event listener breakpoints”看事件到底落在哪一层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
