pointer-events: none 使浏览器在事件捕获阶段跳过该元素及其子树，不进行 hit-testing，事件直接交由 z-index 紧邻下一层可交互元素处理；它不影响渲染、DOM 或样式，仅干预事件流。
因为 pointer-events: none 让浏览器在事件捕获阶段就跳过该元素，不进行 hit-testing，从而把鼠标或 touch 事件直接交给 z-index 紧邻下一层的可交互元素处理——它不是“转发”，而是“彻底忽略”。
pointer-events: none 的实际作用机制
这个属性不改变渲染、不修改 DOM 结构、也不影响 opacity 或 visibility，只干预事件流：
- 浏览器按渲染树自顶向下做 hit-testing，遇到
pointer-events: none的节点，立刻跳过整棵子树（包括所有后代） - 事件不会触发
:hover、:active、click、contextmenu，也不会冒泡经过它 - 透传目标是视觉堆叠顺序中 z-index 紧邻的下一层，不是最底层；中间若有其他未设
none的层，事件就在那里被拦住 -
none对伪元素（::before/::after）无效，必须单独声明
为什么加了还是点不透？常见失效场景
根本原因几乎都是“加错位置”或“漏掉层级”：
- 遮罩是
.mask，却把pointer-events: none写在父容器.dialog上 →.mask本身仍拦截 - 遮罩用了
position: absolute，但父级有transform或opacity创建了新层叠上下文，导致视觉覆盖 ≠ 事件覆盖 - 遮罩下压着
<input type="text">，iOS Safari 15.4 之前版本对none+input组合支持异常，软键盘可能不弹 - 滚动容器（如
.page-content）没加pointer-events: none，touchmove 仍会穿透触发滚动
遮罩里要放关闭按钮，怎么让它可点？
不能靠“父设 none + 子设 auto”来救——CSS 不允许子元素从 none 状态中恢复事件响应能力：
立即学习“前端免费学习笔记（深入）”；
- 把按钮提为遮罩的兄弟节点：
<div class="mask"></div><button class="close">×</button>，再用z-index和position: absolute控制视觉层级 - 用 Portal（React/Vue）把按钮挂到
<body>下，完全脱离遮罩 DOM 树 - 只对遮罩的非按钮区域设
pointer-events: none，按钮所在区域保持auto（需配合clip-path或精确position定位） - 若用伪元素实现遮罩背景（如
.mask::before），则按钮保留在主 DOM 流中，天然可点
移动端和动画中的关键细节
这些地方最容易出问题，且真机表现和 DevTools 模拟器差异大：
- 安卓部分厂商 WebView（华为、小米）对嵌套多层
pointer-events: none支持不稳定，建议扁平化 DOM - 用
opacity做淡入动画时，必须在动画开始前就把pointer-events: none设上，否则过渡帧里用户可能点中半透明状态下的元素 -
visibility: hidden必须配pointer-events: none才能禁点击；display: none天然禁用，但无法做 CSS 动画 - iOS Safari 在
overflow: scroll容器内有时延迟响应none，需搭配touch-action: none并真机验证
真正起作用的永远是那个“正盖在目标上方”的元素本身，而不是你以为它该属于的父容器或视觉分组。DevTools 的 Hit test borders 是唯一靠谱的验证手段——别猜，直接看哪一层在挡路。
