pointer-events: none 会彻底阻止元素及其所有后代响应鼠标事件，即使子元素设为 auto 也无效；它在事件分发前拦截，使 js 监听器完全不触发，调试需查 computed style。
pointer-events: none 会阻止所有鼠标事件，包括子元素
设置 pointer-events: none 后，该元素及其所有后代元素都不再捕获任何鼠标事件（click、hover、mousedown 等），哪怕子元素显式设置了 pointer-events: auto 也无效。这是 CSS 规范的明确行为，不是浏览器 bug。
常见误用场景：想让遮罩层透传点击到下方按钮，但又希望遮罩上的关闭图标可点——此时不能只给遮罩设 pointer-events: none，而需改用其他方案（如分层或 pointer-events: auto + 精确定位）。
pointer-events 可取值及实际影响范围
pointer-events 不是布尔开关，而是有多个关键字值，不同值对事件流的影响差异明显：
-
auto：默认值，元素正常参与事件捕获和冒泡 -
none：完全不响应任何鼠标事件，且阻止事件向下穿透（即子元素也无法触发） -
visiblePainted（SVG专用）：仅当元素有可见填充/描边时才响应事件 -
fill/stroke（SVG专用）：分别限制为填充区或描边区响应
注意：inherit 和 unset 会继承父级计算值，容易在复杂嵌套中引发意外；非 SVG 元素不支持 visibleFill 等值，设了也无效。
与 JavaScript 事件监听器的协作关系
pointer-events 是 CSS 层面的拦截，发生在事件分发前，因此它会直接阻止事件到达目标元素，JavaScript 监听器根本不会被触发。
这意味着：
- 即使元素绑定了
addEventListener('click', ...)，只要其pointer-events为none，回调函数永远不会执行 -
event.stopPropagation()或event.stopImmediatePropagation()对已被 CSS 拦截的事件无意义 - 检查事件是否触发，应优先确认 computed style 中
pointer-events的实际值，而不是只看 JS 绑定逻辑
调试时可用 DevTools 的 “Computed” 面板查看最终生效值，注意继承和层叠可能带来的覆盖。
替代方案：何时不该用 pointer-events
当需求涉及部分交互透传、条件性响应或需要保留焦点/键盘导航时，pointer-events 往往力不从心：
- 表单控件（如
<input>）设为none后无法获得焦点，Tab键跳过，aria-*属性也可能失效 - 需要“视觉禁用但语义可用”的场景（如灰化按钮仍需屏幕阅读器识别），应结合
disabled属性或aria-disabled="true"，而非仅靠pointer-events - 动画中动态切换
pointer-events容易造成事件丢失（如快速 hover → none → hover），建议配合transition或节流处理
真正需要精细控制事件流向时，更稳妥的做法是用 JS 判断 event.target 并手动 preventDefault()，或者用 z-index + 分层布局隔离交互区域。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
