pointer-events: none 仅禁用事件响应而不影响视觉样式，元素仍显示但点击穿透；需配合 -webkit-tap-highlight-color: transparent 消除点击高亮，且不继承，子元素须显式设 auto 才可响应。
pointer-events: none 本身不定义颜色，只控制事件穿透
很多人误以为 pointer-events: none 是一种“透明色”或“视觉+交互双隐身”方案，其实它完全不处理颜色、背景、透明度等视觉属性。它只做一件事：让元素及其子元素彻底退出鼠标/触摸事件捕获链。即使你给该元素设了 background: red 或 opacity: 0.5，只要加了 pointer-events: none，点击就会穿过它落到下层——颜色照常显示，但点击不归它管。
常见错误现象：
- 给遮罩层加了
pointer-events: none，结果发现点击没反应 → 实际是遮罩层下面没可点击元素，或下层被pointer-events: none连锁屏蔽了 - 在移动端加了该样式后，滑动区域失效 → 滑动依赖
touchstart/touchmove，这些也属于 pointer events，同样会被拦截
什么时候该用 pointer-events: none 而不是 opacity: 0 或 visibility: hidden
opacity: 0 和 visibility: hidden 都会让元素“看不见”，但它们仍占据文档流、仍能响应点击（除非显式禁用）。而 pointer-events: none 是唯一能让元素“看得见却点不着”的方式。
- 需要保留布局占位（比如动画过渡中还没消失的图层），又不想干扰下方操作 → 用
pointer-events: none - 想临时禁用按钮但保持其视觉状态（如 hover 样式仍生效）→ 不能用
disabled属性（会重置样式），应配合pointer-events: none - 实现“视觉叠加但逻辑分离”的 UI，比如带图标的标签页头、浮动工具栏浮层 → 子元素若需独立响应，父层必须设
pointer-events: none，再单独给子元素设pointer-events: auto
移动端要注意：tap-highlight-color 和 pointer-events 是两回事
加了 pointer-events: none 并不会消除 iOS/Android 点击时的半透明高亮层（即 -webkit-tap-highlight-color 效果）。因为那个高亮是浏览器渲染层的 overlay，发生在事件分发之前，和 DOM 事件捕获无关。
- 要彻底隐藏点击高亮，必须单独设置：
* { -webkit-tap-highlight-color: transparent; } - 如果只对某类元素禁用高亮（比如按钮），不要全局写
*，避免影响表单控件默认反馈 - 某些 Android 浏览器（如旧版 UC）不支持
-webkit-tap-highlight-color，需搭配user-select: none减少误触感知
容易被忽略的继承与重置问题
pointer-events 默认值是 auto，但它**不继承**——子元素不会自动获得父元素的 none 值。但如果你把父层设为 none，子元素即使设了 auto 也无法触发事件，因为事件根本传不到父层，更别说向下冒泡了。
- 若需父层“透点”但子元素可点，必须显式给子元素设
pointer-events: auto - SVG 元素中该属性行为更复杂：
pointer-events: none在<g></g>上会阻止所有子<path></path>响应，但部分浏览器对fill: none的路径有特殊处理 - React/Vue 中动态切换该属性时，注意不要在条件渲染前就绑定事件监听器，否则监听器可能挂载在已设
none的节点上，导致静默失败
实际项目里最常出问题的，不是写错语法，而是没意识到 pointer-events: none 是个“单向闸门”：它关掉的是整条事件通路，而不是某个颜色层的点击开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
