ie10及以下完全不支持pointer-events，因该属性压根未实现，所有声明均被忽略，计算样式返回auto；@supports和'onpointerdown'检测均不可靠，唯一稳妥方案是直接为现代浏览器用pointer-events: none、为旧ie用透明遮罩替代。
IE10 及以下完全不支持 pointer-events，不是“兼容性差”，是压根没实现——所有相关 CSS 声明都会被忽略，样式计算返回默认值 auto，JS 读取 getComputedStyle(el).pointerEvents 得到空字符串或 undefined。
为什么 @supports 和 UA 检测都靠不住
用 @supports (pointer-events: none) 降级？IE9–IE10 连 @supports 语法都不认识，直接报错或静默跳过。用 JS 判断 'onpointerdown' in document？IE10 支持指针事件 API（pointerdown 等），但偏偏不支持 pointer-events 这个 CSS 属性——两者毫无关系，别混淆。
- 真正能用的检测只有条件注释（仅 IE9 及以下）或
navigator.userAgent中匹配MSIE/Trident，但后者在 Edge 兼容模式下可能误判 - 更稳妥的做法是：不检测，直接按需提供两套方案——现代浏览器走
pointer-events: none，旧 IE 强制走透明遮罩 - 不要把
pointer-events当成“可选优化”，它在旧 IE 里就是无效代码，写了等于白写
用透明遮罩替代 pointer-events: none 的实操要点
核心是：不靠 CSS 禁用事件，而是让遮罩层“物理上不参与事件流”——它不绑定监听器、不设 tabindex、不响应任何交互，只靠定位和层级覆盖视觉，同时保持底层元素可点击、可聚焦、可被屏幕阅读器识别。
- 遮罩必须设
position: absolute或fixed，且z-index高于被覆盖内容 - 背景只能用
background: transparent；禁用rgba(0,0,0,0)（IE8 不支持 rgba） - 必须加
aria-hidden="true"，否则 NVDA/JAWS 仍会尝试读取空遮罩节点 - 若遮罩覆盖了
button或input，原元素需同步设tabindex="-1"+aria-disabled="true"，防止键盘焦点卡住 - 滚动区域中，遮罩需监听
scroll并手动更新top/left，或改用position: fixed+transform: translateZ(0)（IE10+）触发硬件加速
为什么不用 JS 事件代理转发
有人试图在遮罩上监听 click，再用 elementFromPoint 找到底层目标并调用 .click() ——这在旧 IE 里问题很多：
-
elementFromPoint在缩放页面、iframe 内嵌、高 DPR 屏幕下坐标计算严重失准 - 手动触发
.click()无法还原原生事件细节（如ctrlKey、button、detail），对右键、中键、长按等场景失效 - 会引发强制重排（layout thrashing），尤其在频繁滚动时明显卡顿或闪烁
- 无法处理
contextmenu、dragstart、pointerover等非 click 类事件
SVG 是唯一例外：IE9+ 可用 pointer-events
IE9 开始支持 SVG 规范中的 pointer-events，所以如果你必须用该属性，且目标环境是 IE9+，可以把遮罩换成 <svg></svg> 元素：
<svg class="overlay" width="100%" height="100%" style="position: absolute; top: 0; left: 0; z-index: 10;"><rect width="100%" height="100%" fill="transparent" pointer-events="none"></rect></svg>
注意：pointer-events: none 必须写在 SVG 子元素（如 <rect></rect>）上，不能写在 <svg></svg> 根元素上；HTML 中的 <div> 依然无效。
<p>复杂点在于：遮罩不仅要透传鼠标事件，还要兼顾键盘焦点、屏幕阅读器语义、滚动同步和缩放适配——这些都不是单靠一个 CSS 属性能解决的，而是在旧 IE 里，连这个属性都不存在。</p>
</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
