pointer-events: none 使元素在指针事件中“不可见”，事件直接穿透至下层可响应元素；它不影响视觉、伪类、focus（需额外处理），且适用于任意元素。
pointer-events: none 是怎么让点击“穿过去”的
它不是隐藏元素，也不是阻止事件冒泡，而是直接让浏览器在事件捕获/目标阶段就跳过这个元素——就像它在 DOM 树里“不可见”一样。鼠标或触摸事件会继续向下，落到它下面第一个能响应的元素上。
-
pointer-events: none作用于整个元素（包括所有子元素），但子元素可单独覆盖：比如父层设为none，某个按钮设auto，那只有这个按钮能点 - 它不影响
:hover、:active等伪类的样式计算（除非你同时禁用了交互，否则样式仍可生效） - 对
focus行为无效：即使设了none，用 Tab 键仍可能聚焦到该元素（需额外加tabindex="-1"或移除tabindex） - 不触发任何指针事件监听器：
click、mousemove、touchstart全部静默，连event.preventDefault()都没机会执行
什么时候该用 pointer-events 而不是 disabled 或 opacity
disabled 只适用于表单控件（<button>、<input> 等），且会强制重置样式；opacity: 0 或 visibility: hidden 会改变视觉表现，还可能影响布局或屏幕阅读器。而 pointer-events: none 是唯一能「视觉保留 + 交互屏蔽 + 任意元素通用」的方案。
- 禁用非表单元素（如
<div>包裹的卡片、自定义下拉项）：直接加pointer-events: none，再配个灰色文字或低透明度样式 - 模态框遮罩层需要“透点”：遮罩设
pointer-events: none，弹窗本身设pointer-events: auto（显式声明更安全） - 图表叠加层（如 ECharts / D3 的 tooltip 容器）：避免遮挡底层图形的 hover 响应，又不想删掉 DOM
- 动画中临时冻结某区域交互：比反复绑定/解绑事件监听器轻量得多
常见踩坑：继承、SVG、移动端兼容性
这个属性默认是可继承的，但很多开发者误以为设在父容器就一劳永逸——其实子元素只要自己写了 pointer-events: auto，就会立刻恢复响应能力，这点和 display 或 visibility 完全不同。
- SVG 元素支持更多值（如
visibleFill），但在 HTML 普通元素中设这些值会被忽略，等同于auto - IE11 支持
auto和none，但不支持 SVG 相关值；Safari 早期版本对pointer-events在iframe内的表现有 bug（2026 年主流版本已修复） - 移动端 touch 事件同样受控：设了
none后，touchstart不会触发，也不会触发click的模拟（即没有“300ms 延迟 click”） - 不要和
z-index混淆：穿透行为只取决于pointer-events值，和层叠上下文顺序无关；即使元素z-index最高，设了none也照样被穿透
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
pointer-events: none; /* 关键：视觉存在，但点击透过去 */
}
.modal {
position: relative;
z-index: 1000;
pointer-events: auto; /* 显式声明，避免继承干扰 */
}真正容易被忽略的是：它不解决语义可访问性问题。屏幕阅读器仍会朗读设了 pointer-events: none 的元素，如果该元素本应被禁用，还得同步加 aria-disabled="true" 和逻辑判断。
立即学习“前端免费学习笔记（深入）”；
