pointer-events属性控制鼠标事件是否传递给元素，关键取值为auto（默认参与事件）和none（事件穿透至下层）；它不影响布局、可见性或键盘交互，仅禁用鼠标事件。
pointer-events属性的基本行为和取值含义
pointer-events 控制元素是否能成为鼠标事件（如 click、hover、mousedown）的目标。它不是“禁用点击”或“让元素不可见”，而是决定浏览器是否把鼠标事件传递给该元素——如果设为 none，事件会穿透到下层元素。
常见取值中真正影响穿透的只有两个：auto（默认，参与事件捕获与冒泡）和 none（完全不响应任何鼠标事件，且不阻止事件向下传播）。其他值如 visiblePainted 或 stroke 在 SVG 中才有意义，普通 HTML 元素只认 auto 和 none。
注意：pointer-events: none 不会阻止 focus 或键盘操作，也不影响 tabindex；它只管鼠标事件。
什么时候必须用pointer-events: none而不是opacity或visibility
想让上层遮罩层“透明可点”，但又不能隐藏内容或破坏布局时，pointer-events: none 是唯一靠谱的选择：
-
opacity: 0或visibility: hidden会让元素视觉消失，但依然占据事件流位置（除非同时加pointer-events: none），点击仍可能被拦截 -
display: none虽然彻底移除，但会触发重排，且无法做过渡动画 -
pointer-events: none允许元素保留在 DOM 中、维持样式和动画、不影响布局流，仅关闭鼠标交互
典型场景：模态框蒙层上的图标按钮、带 hover 效果的 SVG 图标覆盖层、Canvas 上的 UI 控件层。
穿透后事件目标是谁？要注意z-index和DOM顺序
事件穿透不是“随机找下面的元素”，而是按事件捕获路径向下查找——即从根节点开始，逐层检查当前坐标下是否有可响应的元素。最终触发的目标取决于：
- 元素是否设置了
pointer-events: auto（或未设置，即默认） - 元素是否在鼠标坐标处有可绘制区域（比如
background为空且无子内容，即使width/height存在也可能不响应） -
z-index只影响层叠顺序，不改变事件捕获路径；真正决定“谁在上面能被点到”的是 DOM 树中的顺序 +pointer-events状态
容易踩的坑：
- 父容器设了
pointer-events: none，子元素即使设auto也无效（继承不可逆，子元素无法“自救”） - 使用
transform: translateZ(0)或will-change: transform创建新层叠上下文后，DOM 顺序和视觉层叠可能不一致，导致预期外的穿透结果 - SVG 内嵌在 HTML 中时，
<svg></svg>根元素若设pointer-events: none，整个 SVG 都失效，包括内部<g></g>或<path></path>
React/Vue 中动态控制pointer-events的注意事项
框架里别直接写 style={{ pointerEvents: isDisabled ? 'none' : 'auto' }} 这种内联样式——看似简单，但容易和 CSS 类冲突，尤其当类里写了 pointer-events: auto !important 时，JS 设置会被覆盖。
更稳妥的做法是：
- 提前定义好 CSS 类，比如
.pe-none { pointer-events: none; }和.pe-auto { pointer-events: auto; } - 用 className 切换，避免内联样式优先级问题
- 如果必须用内联，确保没其他地方用
!important锁死该属性
另外，服务端渲染（SSR）或 hydrate 阶段，pointer-events 不会触发重绘，但会影响首次交互行为——比如首屏蒙层还没加载 JS 时就点了，得靠 CSS 预置好初始状态。
复杂点在于：它不触发重排重绘，所以调试时看不到视觉变化；但它悄悄改写了事件流向，出问题时很难一眼定位到是这个属性在作怪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
