pointer-events 是一个 CSS 属性，用于控制元素是否接收鼠标或触摸事件；设为 none 时事件穿透至下层，auto 为默认值且正常响应事件。
pointer-events 是什么？一句话说清
pointer-events 是一个 CSS 属性，用来决定元素是否「接收」鼠标（或触摸）事件。它不改变元素的视觉表现，只控制事件是否能落在这个元素上——设为 none，点击、hover、拖拽等统统失效，且事件会穿透到下层元素；设为 auto（默认），一切照常。
什么时候必须用 pointer-events: none？
这不是“可有可无”的装饰属性，而是解决几类高频交互问题的刚需方案：
- 全屏遮罩层（比如 loading 蒙版）需要透出下方按钮的点击 —— 给遮罩加
pointer-events: none，比调z-index或改opacity更可靠 - 禁用按钮但保留样式（比如灰色 + 不允许点击），不用
disabled（会重置原生样式和 focus 状态） - 自定义光标（
cursor替换为图片）时，避免光标 DOM 干扰真实点击 —— 光标元素本身必须设pointer-events: none - SVG 中精细控制哪些图形区域响应点击（如只让描边可点、填充不可点）
常见误用和坑点
看似简单，但几个典型错误会让效果完全相反：
-
pointer-events: none会**同时禁用所有子元素**的事件 —— 即使你给子元素单独设pointer-events: auto，也无效（除非父元素是auto） - 它**不影响键盘焦点**：元素仍可通过 Tab 进入
:focus，也不影响tabindex行为 - 在 IE11 及更早版本中不支持（但现代项目基本已无需兼容）；移动端 Safari 从 iOS 13.4+ 才完整支持
visiblePainted等 SVG 值 - 和
opacity: 0或visibility: hidden混用容易混淆：前者只是“看不见”，后者才真正移出渲染树；而pointer-events: none是“看得见但点不到”
Vue/React 中动态控制的小技巧
在框架里别硬写内联 style，推荐用 class 切换：
立即学习“前端免费学习笔记（深入）”；
<img
:class="{ 'is-disabled': isReadonly }"
@click="handleClick"
src="@assets/images/icon.png"
/>
对应 CSS：
.is-disabled {
pointer-events: none;
cursor: not-allowed;
opacity: 0.6;
}
注意：@click 事件不会触发，但 Vue 的 v-model、ref、watch 等逻辑不受影响 —— 它只管鼠标事件链，不碰数据流。
最常被忽略的一点：当用 pointer-events: none 实现“穿透点击”时，务必确认下层元素没有被其他 pointer-events: none 或 display: none 阻断；否则你以为穿过去了，其实卡在半路。
