直接给编辑器容器加 pointer-events: none 会失灵，因为事件捕获路径一旦被跳过，子元素设 auto 也无法恢复；背景水印等纯视觉层可直接设 none，浮动工具栏需自身设 none 而按钮单独设 auto 且为直接子元素，协作光标用伪元素并设 none，移动端需避开 input/textarea、滚动穿透改用外层容器控制，动画中 pointer-events 需 JS 或关键帧动态切换。
为什么直接给编辑器容器加 pointer-events: none 会失灵
因为 HTMEditor 的 DOM 结构通常很深（比如 .editor → .content → .block → .inline），一旦你在某一层（如 .editor-overlay）设了 pointer-events: none，整条子树都会被浏览器跳过命中检测——哪怕你在最内层写 pointer-events: auto，也无效。浏览器不会因为子元素写了 auto 就回头重走事件路径。
哪些背景层适合加 pointer-events: none
不是所有覆盖层都该一刀切设为 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 在动画开始前设 pointer-events: none，结束后同步移除，否则中间帧仍可点。尤其在快速连续触发的编辑器场景下，残留的可点击窗口会导致误操作。
立即学习“前端免费学习笔记（深入）”；
