pointer-events-none 仅对当前元素生效且跳过整棵子树，加错位置（如父容器而非遮罩层本身）、未定位、伪元素未单独设置、响应式前缀缺失或关闭按钮在遮罩内设 auto 均会导致点击不穿透。
pointer-events-none 能让元素彻底不参与鼠标事件捕获，点击直接落到它下方最近的可交互元素上——但必须加在真正遮挡目标的那个元素本身，不是父容器，也不是兄弟节点。
为什么加了 pointer-events-none 还点不透？
最常见原因是加错位置。这个类只对当前元素生效，且子树完全被跳过：浏览器在事件捕获阶段就绕开它，根本不会往下查子元素是否设了 pointer-events-auto。
- 检查 DOM 结构：确认遮罩层（比如
.overlay）是直接盖在目标按钮/链接之上的那个元素，而不是它的父容器 - 确认该元素有定位（
absolute/fixed），否则可能因层叠上下文没真盖住底层 - 伪元素（如
::before）要单独加pointer-events-none，它会独立捕获事件 - Tailwind 默认不支持响应式前缀（如
md:pointer-events-none），若需断点控制，得手动写媒体查询
遮罩里想留一个关闭按钮，怎么让它可点？
别用“父设 pointer-events-none + 子设 pointer-events-auto”这种写法——它在所有现代浏览器里都无效。父级为 none 时，整棵子树都被跳过，auto 不起作用。
- 把关闭按钮移出遮罩 DOM 树，例如用 Portal 渲染到
下，再靠z-index控制视觉层级 - 或者只给遮罩的「非按钮区域」设
pointer-events-none，按钮所在区域保持默认auto - 避免在遮罩内放
<input>或<select></select>，iOS 旧版和部分安卓 WebView 对这类控件穿透支持极差
pointer-events-none 和禁用按钮的视觉反馈怎么配？
它只禁鼠标事件，不影响键盘焦点、屏幕阅读器或 JS 触发的 .click()。光加这个类，用户仍能按回车触发链接、Tab 到按钮后空格点击——这不是“禁用”，只是“鼠标点不着”。
- 同步加
tabindex="-1"（移除键盘焦点）和aria-disabled="true"（通知辅助技术） - 视觉上必须配合
opacity-70+cursor-not-allowed，否则用户看不出它是不可交互状态 - 表单控件如
<button disabled></button>原生已屏蔽鼠标事件，此时再加pointer-events-none是冗余的
最易被忽略的一点：动画中切换 pointer-events 必须严格卡时机。用 opacity 做淡入时，不能等过渡结束才加 pointer-events-none——中间帧若仍是 auto，用户就可能点中半透明状态下的元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
