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）无效，必须单独声明

为什么加了还是点不透？常见失效场景

根本原因几乎都是“加错位置”或“漏掉层级”：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 遮罩是 .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）把按钮挂到 下，完全脱离遮罩 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 是唯一靠谱的验证手段——别猜，直接看哪一层在挡路。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！