pointer-events: none 不能捕获点击，因其跳过命中检测；应使用 pointer-events: auto 配合 opacity: 0 等视觉隐藏方式，或直接监听容器坐标计算逻辑位置。
pointer-events: none 本身不会“捕获”点击，它只会让元素不响应点击——想“捕获不可见层的点击”，本质是误用了这个属性。真正需要的是：让视觉上不可见/透明的层能收事件，同时又不影响下层交互。这恰恰和 pointer-events: none 的作用相反。
为什么 pointer-events: none 不能用于“捕获”点击
浏览器对 pointer-events: none 的处理是硬性跳过该元素及其子树的命中检测。一旦设了，addEventListener('click', ...) 在该元素上永远不触发，也不存在“转发”或“代理”的机会。它不是事件拦截器，而是事件过滤器——滤掉就没了。
常见误解场景：
- 给一个半透明遮罩层设
pointer-events: none，以为能“透过它拿到点击坐标”，结果连click都监听不到 - 用伪元素
::before绘制高亮边框并设pointer-events: none，再试图在该伪元素上绑定事件——无效，伪元素不支持 JS 绑定
想让不可见层响应点击，得用 pointer-events: auto + 视觉隐藏
真正可行的做法是：保留元素参与事件流的能力（即 pointer-events: auto），但通过其他方式让它“不可见却不挡事”。关键在于区分“视觉不可见”和“事件不可见”：
立即学习“前端免费学习笔记（深入）”；
-
opacity: 0：元素仍占位、仍响应事件，适合做“隐形按钮” -
visibility: hidden：元素不可见但仍占空间、仍响应事件（注意：部分旧版 Safari 对visibility: hidden元素的事件支持不稳定） -
width: 0; height: 0; overflow: hidden：彻底缩成点，但需确保有实际尺寸（如min-width: 1px）才能被命中
示例：一个覆盖在编辑器上方、仅用于监听点击坐标的透明热区
.hotzone {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: auto; /* 必须是 auto */
opacity: 0; /* 视觉隐藏，但事件照收 */
z-index: 10;
}编辑器中真正需要“捕获不可见点击”的典型场景
这类需求通常出现在协作光标、选区高亮、拖拽锚点等场景，它们往往没有 DOM 节点，靠 Canvas 或伪元素渲染。此时不能依赖 CSS 层监听，必须换路径：
- 把事件监听绑定到编辑器容器（如
.editor），用e.clientX / e.clientY+getBoundingClientRect()换算坐标，再映射到逻辑位置 - 对 Canvas 渲染层，用
canvas.addEventListener('click', ...)，配合ctx.isPointInPath()判断是否击中某条不可见路径 - 伪元素无法绑定事件，所以协作光标若用
::after实现，其点击行为必须退回到真实 DOM 元素（如一个span）上处理
移动端特别容易翻车的点
iOS Safari 对“不可见但可点”元素的容忍度很低：
-
opacity: 0元素在某些 Safari 版本（≤16.4）可能触发click但不触发touchstart，导致手势中断 - 如果该层下方压着
<input>，Safari 可能拒绝弹出软键盘——哪怕你没设pointer-events: none - 解决办法：用
position: fixed+inset: 0创建全屏热区，并在touchstart中立刻e.preventDefault()阻止默认滚动，再手动 dispatch 自定义事件
最稳妥的方式从来不是靠“不可见层捕获”，而是把点击逻辑下沉到编辑器根容器，用坐标计算代替视觉层绑定——毕竟编辑器里真正重要的不是“点在哪一层”，而是“点在哪个逻辑块”。
