根本原因在于pointer-events: none会阻止整棵子树的事件捕获，子元素设auto无效；伪元素、svg、旧ie及移动端支持不一，无法用于内容保护，仅作交互开关。
根本原因不是“设置错了”，而是 pointer-events: none 的行为被严重误解——它不支持子元素用 auto “自救”，也不等同于 display: none 或 visibility: hidden。
父元素设了 none，子元素写 auto 也没用
这是最常踩的坑。只要某个祖先元素（哪怕隔了三层）设置了 pointer-events: none，浏览器在事件捕获阶段就直接跳过整棵子树，子元素再写 pointer-events: auto 完全无效。
- 验证方式：选中目标按钮，在开发者工具“Computed”面板搜索
pointer-events，若显示为none（哪怕带删除线），就说明被继承或覆盖 - 临时修复：执行
getComputedStyle(document.querySelector('.btn')).pointerEvents确认值；再逐级向上检查父元素的 computed 值，定位第一个设了none的节点 - 正确解法：把可点击控件（如关闭按钮）移出该容器 DOM 树（例如 Portal 到
），或只对遮罩的“非按钮区域”设none
伪元素、SVG 和透明遮罩容易漏掉
::before 和 ::after 默认继承父级 pointer-events，但它们是独立渲染层，会单独拦截事件——哪怕父元素没设 none，伪元素自己也可能挡着。
- 常见错误：给遮罩层加
pointer-events: none，却忘了给它的::before也加同一声明 - SVG 内部的
<g></g>设了none，子<path></path>写auto同样无效 - 旧版 IE（IE9 及以下）压根不解析
pointer-events，写了等于没写；必须用position + z-index + transparent background模拟视觉遮罩，且不能绑定任何 JS 事件监听器
移动端和特殊输入框表现更不可靠
安卓 WebView、华为/小米定制浏览器、iOS Safari 对 pointer-events: none 的支持不稳定，尤其涉及 <input type="file">、软键盘弹出、长按保存等场景。
- 长按时仍能保存图片？可能因为浏览器绕过 CSS 直接提取
src，或用户用了双指/三指长按——这些手势无法被 CSS 或 JS 拦截 - 遮罩下有
<input>，iOS 可能不弹键盘；安卓部分机型对文件选择框穿透失效 - 更稳方案：改用
background-image替代<img src>，配合user-select: none、-webkit-user-drag: none等前缀控制
真正难防的从来不是点击穿透，而是截图、录屏、Network 面板里翻出原始图片 URL——pointer-events: none 解决的是交互层问题，不是内容保护问题。别把它当防盗盾，只当一层轻量的交互开关用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
