加了 pointer-events-none 仍能点到下层元素，是因为该样式不递归作用于子元素，子元素仍保持 pointer-events: auto；需显式为子元素添加 pointer-events-none 或检查实际点击目标。
为什么加了 pointer-events-none 还是能点到下层元素？
加了 pointer-events-none 却发现下层按钮/链接依然响应点击，大概率是因为该类只作用于当前元素本身，而它的子元素（比如内部的 button、a 或带 onclick 的 div）仍保留默认的 pointer-events: auto。Tailwind 不会自动递归重置子节点事件行为。
实操建议：
- 检查 DOM 结构：用浏览器开发者工具确认被点击的实际目标是否是子元素，而非加了
pointer-events-none的父容器 - 若需整块区域禁用交互，确保该类应用在最外层容器，且子元素不主动绑定事件或覆盖
pointer-events - 必要时对关键子元素显式加
pointer-events-none，例如：
什么时候不该用 pointer-events-none 做“遮罩”？
常见错误场景是用它实现视觉遮罩（如加载态蒙层），但忽略了可访问性与语义断裂问题：屏幕阅读器可能跳过该区域，键盘焦点仍可进入下层控件，导致 tab 键导航错乱或触发意外操作。
更稳妥的做法：
- 配合
aria-hidden="true"和tabindex="-1"控制语义与焦点流 - 若遮罩需保留部分交互（如关闭按钮），改用
pointer-events-auto局部覆盖，而非全量禁用 - 避免在含表单控件（
input、select）的父容器上直接加pointer-events-none，否则用户无法聚焦输入
pointer-events-none 在 Tailwind 中的兼容性与副作用
Tailwind 的 pointer-events-none 编译为 pointer-events: none，IE11 不支持，其他现代浏览器均无问题。但要注意两个隐蔽影响：
- 该样式会阻止所有指针事件，包括
hover、focus、contextmenu—— 所以不要指望加了它之后还能触发group-hover或focus-within - 当与
transform、opacity等触发硬件加速的属性共存时，某些旧版 Safari 可能出现渲染闪烁，可加will-change: transform缓解 - 若元素有
z-index且位于堆叠上下文顶层，禁用 pointer-events 后，鼠标会“穿过”它落到 z-index 更低的可交互元素上 —— 这正是穿透的原理，也是预期行为
替代方案：不用 pointer-events-none 怎么实现点击穿透？
真需要穿透但又不想全局禁用事件时，可以考虑 CSS 层级控制：
- 移除遮罩层的
z-index，让它自然处于文档流底层（前提是 DOM 顺序允许） - 用
position: static+ 移除定位属性，让元素不参与堆叠上下文创建 - JavaScript 方案：监听遮罩层的
click事件，调用event.stopPropagation()并手动触发下层元素的click()，但需注意事件委托和动态元素问题
复杂点在于：穿透不是单纯“看不见”，而是“不参与事件捕获与冒泡链”。一旦涉及键盘导航、焦点管理或无障碍需求，pointer-events-none 很快就不是最简解了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
