pointer-events属性决定元素是否作为鼠标事件目标，设为none时事件穿透至下层元素，不影响键盘交互；HTML中常用auto和none，SVG支持更早；需注意伪类失效、子元素继承及可访问性配合。
pointer-events属性的基本作用pointer-events 用来决定一个元素是否能成为鼠标事件（如 click、hover、mousedown）的目标。它不控制事件是否“发生”，而是控制浏览器是否把该元素当作事件的“命中目标”。设为 none 后，鼠标事件会穿透该元素，落到它下面的元素上。
- 常见错误：以为
pointer-events: none 能阻止子元素触发事件——其实它会递归禁用所有后代元素（除非子元素显式设回 auto 或其他有效值）
-
pointer-events 对 focus、tabindex、键盘事件无影响
- 它对 SVG 元素的支持更早更完整，HTML 元素在 IE11+ 才稳定支持
哪些值可用，各自行为差异pointer-events 的合法值包括：auto、none、visiblePainted（SVG）、visibleFill 等，但日常 HTML 开发中只用前两个：
-
auto：默认值，元素正常响应鼠标事件
-
none：元素不捕获任何鼠标事件，事件透传给下层
-
inherit：从父元素继承（慎用，容易误判层级）
pointer-events: none 能阻止子元素触发事件——其实它会递归禁用所有后代元素（除非子元素显式设回 auto 或其他有效值）pointer-events 对 focus、tabindex、键盘事件无影响pointer-events 的合法值包括：auto、none、visiblePainted（SVG）、visibleFill 等，但日常 HTML 开发中只用前两个：
-
auto：默认值，元素正常响应鼠标事件 -
none：元素不捕获任何鼠标事件，事件透传给下层 -
inherit：从父元素继承（慎用，容易误判层级）
注意：pointer-events: none 不等于 disabled —— 表单控件即使设了 none，依然可被聚焦、提交、读取 value；它只管“鼠标点不点得中”。
实际使用时容易踩的坑
- 覆盖层遮挡按钮但想保留点击：设覆盖层 pointer-events: none，而不是靠 z-index 调序或透明度欺骗
- 图标按钮内嵌 svg，结果图标点不中：检查 svg 或其 path 是否被父级的 pointer-events: none 继承了
- 使用 pointer-events: none 后，CSS :hover 和 :active 也失效——因为伪类依赖事件目标判定
- 动态切换时（比如 JS 控制），记得同时处理键盘可访问性：禁用鼠标交互不等于可以忽略 tabindex 或 aria-disabled
.button-wrapper {
position: relative;
}
.button-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none; /* 让点击穿过 overlay */
}
和 JavaScript 事件监听的配合要点
- pointer-events: none 后，element.addEventListener('click', ...) 不会触发，但事件仍可能在父级通过事件委托捕获（前提是父级没被同样禁用）
- 如果需要“视觉可见但逻辑不可点”，优先用 pointer-events: none + aria-disabled="true"，而不是仅靠 CSS 隐藏或透明
- 检查是否生效？打开 DevTools，在 Elements 面板选中元素，看 Styles 里 pointer-events 是否被正确计算（注意 computed 值是否为 none，而非 inherited 或 overridden）
pointer-events: none 后，element.addEventListener('click', ...) 不会触发，但事件仍可能在父级通过事件委托捕获（前提是父级没被同样禁用）
- 如果需要“视觉可见但逻辑不可点”，优先用 pointer-events: none + aria-disabled="true"，而不是仅靠 CSS 隐藏或透明
- 检查是否生效？打开 DevTools，在 Elements 面板选中元素，看 Styles 里 pointer-events 是否被正确计算（注意 computed 值是否为 none，而非 inherited 或 overridden）
真正难处理的是混合场景：比如一个半透明遮罩要拦截点击，但又允许其中某个小区域可点——这时不能全设 none，得用局部 pointer-events: auto 配合定位，且必须确保该区域在 DOM 树中处于遮罩内部而非兄弟节点。
