pointer-events 决定事件能否到达元素，事件冒泡决定事件到达后如何向上传播；pointer-events: none 使元素不响应鼠标事件且事件穿透，此时无冒泡可言。
事件冒泡和 pointer-events 是两个不同层级的机制：前者是 JavaScript 的事件传播行为，后者是 CSS 控制元素是否参与鼠标事件捕获的开关。它们可以配合使用，但作用点不同——pointer-events 决定“事件是否能到达该元素”，而事件冒泡决定“事件到达后如何向上传播”。
pointer-events 决定了事件能否触发在当前元素上
pointer-events: none 会让元素完全不响应鼠标事件（包括 click、mouseenter 等），且事件会穿透到下层元素，就像这个元素不存在一样。此时，该元素上的事件监听器根本不会被调用，自然也就没有冒泡可言。
例如：
- 一个遮罩层设置
pointer-events: none，点击时事件直接落到它后面的按钮上； - 如果遮罩层是
pointer-events: auto（默认），点击它会触发自己的事件，再按冒泡规则传给父级； -
pointer-events: visiblePainted等值较少用，一般只关注auto和none。
事件冒泡发生在“事件已到达某元素”的前提下
只有当某个元素实际接收并触发了事件（即没被 pointer-events: none 拦截），它的事件监听器才会执行，之后才可能向上冒泡。所以：冒泡不会绕过 pointer-events: none 的拦截，它根本没机会开始。
立即学习“Java免费学习笔记（深入）”；
常见误区：以为给父元素加了 event.stopPropagation() 就能阻止穿透，其实没用——因为子元素设了 pointer-events: none，事件压根没发到它身上，更谈不上在它那 stopPropagation。
实用配合场景：局部禁用 + 全局捕获
比如做一个带图标和文字的卡片，希望点击空白区响应卡片逻辑，但点击图标时不触发卡片事件（而是执行图标专属操作），同时又不想让图标挡住下方内容：
- 给图标设
pointer-events: auto（默认），绑定自己的 click 处理函数； - 在图标 handler 里调用
event.stopPropagation()，防止冒泡到卡片； - 若图标需“透传”给更下层（比如背景图层），则设
pointer-events: none，此时它不响应也不冒泡，事件直接去下层； - 卡片本身保持
pointer-events: auto，确保空白点击能触发它的事件。
调试技巧：用 Chrome DevTools 快速验证
在 Elements 面板中选中元素，右侧 Styles 标签页查看 pointer-events 是否生效；再切换到 Event Listeners 标签页，看对应事件是否注册成功。如果某元素上没列出 mouse/click 监听器，可能是因为它被 pointer-events: none 屏蔽了，或者监听器根本没绑定上去。
不复杂但容易忽略
