pointer-events 是控制元素是否响应鼠标/触控事件的 CSS 属性，常用于遮罩穿透、图层交互等场景；必须注意父设 none 时子需显式设 auto 才能响应，且不继承但会阻断事件流。
pointer-events 是什么，什么时候必须用它
pointer-events 是 CSS 属性，控制元素是否响应鼠标（或触控）事件。它不改变 DOM 结构或视觉表现，只开关“点击/悬停/拖拽”等交互能力。常见于遮罩层、图标按钮叠加、图表图层管理等场景——比如你点一个半透明 div，却希望点击穿透到底下可交互的按钮，就得靠它。
怎么写 pointer-events 才不会失效
最常踩的坑是：父元素设了 pointer-events: none，子元素再设 auto 也无效——pointer-events 不继承，但 none 会阻止事件向下传递，子元素根本收不到事件流。
-
pointer-events: none：该元素完全不捕获任何指针事件（包括click、hover、contextmenu），且事件会穿透到下层元素（前提是下层没被其他pointer-events: none挡住） -
pointer-events: auto：默认行为，正常响应事件 -
pointer-events: visiblePainted等 SVG 专用值，在 HTML 中基本不用，别乱试 - 注意兼容性：
pointer-events在 IE10+、Edge、Chrome、Firefox、Safari 均支持，但 IE10/11 不支持all或fill等 SVG 值
点击穿透的实际写法示例
假设你有一个全屏遮罩 .overlay，上面有个关闭按钮 .close-btn，要求：点击遮罩其余区域不响应，但点击按钮要关闭遮罩。
.overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.5);
pointer-events: none; /* 关键：让遮罩本身不拦截点击 */
}
<p>.overlay .close-btn {
pointer-events: auto; /<em> 按钮必须显式开启，否则继承自父级 none </em>/
}</p>
如果漏掉 .close-btn 的 pointer-events: auto，按钮就点不动——这是高频失误。
和 JavaScript 事件监听的配合要点
pointer-events: none 后，addEventListener('click', ...) 对该元素完全无效，但要注意：事件仍可能通过冒泡到达父级（只要父级没设 none）。所以不要依赖“加了 none 就绝对安全”，尤其在动态插入元素时：
- 用
event.target判断实际点击的是哪个元素，而不是只看绑定监听器的节点 - 如果用
document.addEventListener('click', ...)做全局关闭逻辑，需配合element.contains(event.target)排除遮罩内非按钮区域 -
pointer-events: none不影响focus或键盘操作，如需禁用 tab 键盘导航，还得加tabindex="-1"和aria-hidden="true"
真正难的不是写对属性，而是理清“谁该响应、谁该透传、谁该兜底”的三层事件流向——稍一疏忽，就会出现点不中、点两次、或点哪都触发同一动作的情况。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
