pointer-events: none 作用于父容器时会阻止其所有子元素接收事件，即使子元素设为 auto 也无效，因为事件在父级就被拦截；真正生效的是被点击元素自身的 pointer-events 值。
pointer-events: none 能让编辑器里的遮罩、浮动工具栏、水印图层等“视觉存在但点击不生效”，但直接加在父容器上，编辑器内部的按钮、输入框、选区手柄全会失灵——这不是穿透，是彻底禁用。
为什么编辑器里加了 pointer-events: none 反而点不动内容？
编辑器 DOM 结构通常很深（比如 .editor > .content > .block > .inline），一旦你在某一层（如 .editor-overlay）设了 pointer-events: none，整条子树都会被浏览器跳过命中检测。哪怕你在最内层写 pointer-events: auto，也无效。
常见错误结构：
.editor-overlay {
pointer-events: none;
}
.editor-overlay .toolbar-button {
pointer-events: auto; /* ❌ 白写，父级已拦截全部事件 */
}真正起作用的只有“被点击的那个元素本身”是否为 none；浏览器不会因为子元素写了 auto 就回头重走事件路径。
立即学习“前端免费学习笔记（深入）”；
编辑器中必须穿透的三类典型遮挡层
不是所有覆盖层都适合统一设 none，得按角色区分处理：
-
背景水印/装饰图层：纯视觉，无交互需求 → 直接给该
<div>或<canvas>加pointer-events: none -
浮动工具栏（如富文本格式栏）：需局部响应（如加粗按钮），但不能挡住下方文字选区 → 工具栏自身设
pointer-events: none，每个按钮单独设pointer-events: auto，且确保按钮是工具栏的**直接子元素**（避免中间嵌套<div class="group">没设 auto） -
实时协作光标/高亮边框：用伪元素（
::before/::after）绘制，对其设pointer-events: none；真实可编辑区域保持默认行为，不额外包裹
移动端编辑器要特别防两个坑
iOS Safari 对 pointer-events: none 的支持虽稳定，但有两处容易翻车：
- 若穿透层下方压着
<input>或<textarea>，旧版 Safari（≤15.3）可能连软键盘都不弹 —— 解决办法：不在编辑器根容器设none，只对非表单区域的装饰层设 - 滚动穿透（手指滑动时底层页面跟着滚）不是靠给遮罩设
none，而是给编辑器外层的可滚动容器（如.page-wrapper）动态加pointer-events: none，再通过 JS 在 touchend 后立刻切回auto - 动画过渡中别留空窗：用
opacity做淡入时，不能只靠opacity: 0; pointer-events: none一劳永逸；必须用@keyframes或 JS 在动画开始前设none，结束后同步移除，否则中间帧仍可点
真正安全的结构：按钮永远别塞进 none 容器里
编辑器里最稳妥的做法，是把需要交互的控件（如关闭按钮、格式按钮、插入菜单）从遮罩或装饰容器中“拎出来”，变成同级兄弟节点：
<div class="editor-content"></div> <div class="editor-overlay" style="pointer-events: none;"></div> <button class="toolbar-button" style="position: absolute; z-index: 10;">B</button>
这样按钮完全不在 overlay 的 DOM 子树中，不受其 none 影响；靠 z-index 和定位叠在正确位置即可。React 用户直接用 createPortal 渲染到 <body> 下，Vue 用户可用 v-create 或手动 appendChild。
复杂点在于：编辑器里常有多个重叠层（水印 + 协作光标 + 浮动工具栏），它们之间没有父子关系，但渲染顺序由 z-index 和层叠上下文决定——此时 pointer-events 是否生效，取决于你点中的那个像素，最终落在哪一层的绘制边界内，而不是 HTML 结构顺序。
