pointer-events: none 会彻底阻止元素及其所有后代响应所有鼠标事件（如click、hover、focus、mousedown等），且事件在父层即被跳过，子元素设auto也无效；它仅影响指针事件，不阻碍键盘操作、布局或语义，禁用表单控件应优先使用disabled属性。
pointer-events: none 会阻止所有鼠标事件，不只是点击
设置 pointer-events: none 后，元素不仅无法响应 click，还会忽略 hover、focus、mousedown、contextmenu 等所有指针相关事件。它不是“禁用点击”，而是“彻底退出指针事件捕获链”。
常见误用场景：
- 给按钮加
pointer-events: none后，键盘Tab仍能聚焦，但Enter无法触发 —— 因为点击逻辑被绕过了，而表单提交通常依赖click事件 - 父容器设了
none，子元素即使显式设auto也无效 —— 该属性不继承，但事件捕获在父层就终止了，子元素根本收不到事件
替代方案：用 disabled 属性更语义化且兼容键盘
对原生可交互元素（如 <button></button>、<input>、<select></select>），优先用 disabled 属性而非 CSS 模拟禁用：
-
disabled自动禁用所有交互（鼠标 + 键盘），并触发浏览器默认禁用样式（如灰阶、cursor: not-allowed） - 屏幕阅读器能正确识别状态，
pointer-events: none则无此保障 - 表单提交时，
disabled元素的值不会被提交；而pointer-events: none下元素仍参与表单数据收集
示例：
<button disabled>已禁用</button>
必须用 pointer-events 时，注意穿透行为和 z-index 关系
pointer-events: none 会让鼠标“穿过”该元素，落到它下方的元素上。这在遮罩层、图标覆盖等场景容易出问题：
- 如果遮罩层用了
pointer-events: none，用户可能意外点中背后按钮 - 若遮罩层下有多个重叠元素，点击位置将触发最上层 *非 none* 的那个，与视觉层级（
z-index）无关，只看 DOM 顺序和 pointer-events 状态 - 动画中动态切换
pointer-events值时，需注意浏览器不会触发重排，但事件响应会立即变化，可能造成点击错位
IE 10+ 支持 pointer-events，但 SVG 和伪元素有差异
该属性在 IE 11 中支持良好，IE 10 需加前缀 -ms-pointer-events（实际极少需要）；真正要注意的是边界情况：
- Safari 对 SVG 元素的
pointer-events支持更严格，none在<svg></svg>根节点上可能不生效，需加到具体<path></path>或<g></g> - ::before / ::after 伪元素默认没有
pointer-events，即使设了auto也无法响应事件 —— 它们本就不在事件流中 - 移动端 Safari 对
none的处理偶有延迟，快速连点可能导致一次穿透、一次不穿透
真正要禁用交互，先想清楚是“不让用户操作”，还是“不让当前元素响应”。前者用 disabled 或 aria-disabled="true" 更稳妥；后者才轮到 pointer-events，而且得随时检查它是否真的把事件拦住了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
