唯一可靠的点击穿透CSS属性是pointer-events: none，它使元素不参与事件捕获并透传给下层元素；opacity和visibility无法实现真正穿透，需配合pointer-events: none使用。
用 pointer-events 控制点击穿透，不是 opacity 或 visibility
实现点击穿透唯一可靠的 CSS 属性是 pointer-events，设为 none。它让元素彻底不参与鼠标/触摸事件捕获，事件会透传给 z-index 紧邻下一层的可交互元素。而 opacity: 0 或 visibility: hidden 只影响视觉，元素仍会拦截点击——必须搭配 pointer-events: none 才真正“点得穿”。
pointer-events: none 必须加在遮挡元素自身上，不能加在父容器
这个属性不继承、不传播，只对声明它的那个 DOM 元素生效。常见错误是给一个包裹容器（如 .modal-wrapper）设了 pointer-events: none，结果里面所有子元素（包括本该可点的 .close-btn）全失效了。
- ✅ 正确：遮罩层
.overlay直接设pointer-events: none - ✅ 局部恢复：在按钮上显式写
.overlay .close-btn { pointer-events: auto; } - ❌ 错误：对
.modal设none，再指望.modal > button靠auto挽回——子元素无法覆盖父级的none效果
移动端和 SVG 场景下容易漏掉的关键细节
真机测试时经常发现穿透失效，往往卡在这几个点：
- iOS Safari 中，如果遮罩在
overflow: scroll容器内，或父级有transform/will-change，可能创建意外层叠上下文，导致事件路径错乱 - SVG 元素默认支持
pointer-events，但某些 WebView（如微信内置）对auto解析不稳定，建议显式写pointer-events: auto而非依赖默认值 - 当遮罩同时设置了
touch-action: none（比如用于禁用滚动），pointer-events: none可能被忽略，需一并检查touch-action值
别用 pointer-events: none 替代表单控件的 disabled
原生 或 已天然屏蔽所有指针事件，再加 pointer-events: none 是冗余的；但如果你只是用 CSS 模拟禁用状态（比如加 opacity: 0.5 和 cursor: not-allowed），那就必须手动补上 pointer-events: none，否则点击照常触发。
更关键的是：pointer-events: none 不影响键盘焦点和屏幕阅读器，如果要真正禁用交互，还得同步加 aria-disabled="true" 和 tabindex="-1"（对非原生控件）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
