ie9及以下完全不支持pointer-events: none，css解析时直接忽略该声明，导致遮罩层仍拦截点击；替代方案需用透明定位遮罩+aria-hidden，并配合js动态控制滚动容器pointer-events及多层交互逻辑。
IE9及以下完全不支持pointer-events: none
旧版IE（IE9及更早）压根不解析pointer-events这个声明，CSS计算时直接忽略，返回默认值auto。你写了等于没写，遮罩层依然会拦截点击——这不是兼容性差，是根本没实现。
常见错误是反复调换z-index、检查DOM结构，却没意识到浏览器根本不认这行CSS。JS里用getComputedStyle(el).pointerEvents读出来是空字符串或undefined，也别指望@supports (pointer-events: none)能检测，IE连@supports语法都不支持。
替代方案只能用透明遮罩：设position: absolute或fixed，background: transparent（别用rgba(0,0,0,0)，IE8不认），不绑定任何事件监听器，靠层级视觉覆盖。同时必须加aria-hidden="true"避免屏幕阅读器误读。
移动端WebView行为不一致，真机测试不可省
iOS Safari 15.4之前不支持pointer-events: none与touch-action协同；若遮罩下压着<input>，软键盘可能不弹。安卓部分厂商浏览器（华为、小米）对input[type="file"]穿透失效，得靠JS临时移除遮罩DOM。
滚动穿透不是给遮罩设none就能解决——它本质是遮罩下方的可滚动容器（如.page-content）仍在响应touchmove。正确做法是在遮罩显示时，给那个容器动态加pointer-events: none，隐藏时再移除。
动画中切pointer-events要卡准时机：用opacity淡入时，不能只在开始和结束帧切换；得在动画触发前立刻设pointer-events: none，结束回调里再切回auto，否则用户可能点中半透明状态下的底层元素。
父设none子设auto无效，这是通识不是bug
一旦父元素设了pointer-events: none，浏览器在事件捕获阶段就跳过整棵子树，子元素写pointer-events: auto完全无效。Firefox、Chrome、Safari行为一致，没有兼容性差异。
典型场景是遮罩层上放关闭按钮：错误做法是给.mask设none，再给.close-btn设auto；正确解法只有两个：
– 把关闭按钮用Portal渲染到下，靠z-index控制层级
– 或者只对遮罩的“非按钮区域”设none，按钮所在区域保持auto
注意：表单控件如<select></select>或<input type="checkbox">，部分Android WebView会因硬件加速开关导致穿透失效；iOS旧版甚至不弹软键盘——这些都不是CSS能单独解决的，得结合JS兜底。
React/Vue中class切换比内联style更可控
用style={{ pointerEvents: 'none' }}能工作，但容易漏掉状态同步。比如遮罩显示时禁用了指针事件，但组件内部的disabled属性没更新，表单提交时仍可能把被遮住的按钮数据发出去。
推荐用class切换：.is-overlay-hidden { opacity: 0; pointer-events: none; }。好处是：
– 可以在DevTools里直观看到当前生效的样式
– 能配合CSS过渡动画（opacity + pointer-events联动）
– 避免和visibility: hidden混用（它不影响事件流，加了白加）
– 不会干扰事件冒泡逻辑：父组件监听了onClick，遮罩透传后点击仍会冒泡触发它，这点必须心里有数
真正复杂的是多层嵌套+动画+输入框+无障碍的组合场景，这时候pointer-events只是工具之一，不能指望它包打天下。该用disabled属性的地方别偷懒，该用JS手动同步状态的地方别省代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
