pointer-events: none 仅禁用鼠标/触控事件，不影响键盘（enter/space）、表单提交或屏幕阅读器；因浏览器将键盘激活视为原生行为，不经过css事件流控制，故回车仍可触发按钮。
直接用 pointer-events: none 就能禁用鼠标点击，但它不是“完全禁用”，只拦鼠标和触控事件，键盘、表单提交、屏幕阅读器照常工作。
为什么 pointer-events: none 点不了却还能按回车？
因为这个 CSS 属性只在事件分发的捕获/冒泡阶段跳过该元素，不碰键盘逻辑。比如一个 <a href="/login"></a> 加了它，鼠标点无效，但焦点在它上面时按 Enter 仍会跳转——浏览器没删掉它的语义，只是跳过了鼠标事件。
- 它不影响
tabindex、focus()或键盘触发的click（Enter/Space） - 对
<input>、<select></select>等表单控件效果不稳定：IE11 和旧版 Safari 中下拉箭头可能仍可点，type="range"滑块仍可拖 - 子元素设
pointer-events: auto也收不到事件——父级为none时，事件根本不会往下走
按钮禁用该用 disabled 还是 pointer-events: none？
优先用原生 disabled 属性，除非你明确需要以下某条：
- 按钮的值要参与表单序列化（
disabled会让字段被排除） - 正在做加载态切换，但不想触发浏览器默认的禁用样式重绘（比如 Ant Design 的 loading 按钮）
- 需要遮罩层盖住按钮，又希望点击穿透到下方区域（此时
pointer-events: none是唯一轻量解法）
如果硬要用 CSS 方案，必须同步加 cursor: not-allowed + opacity: 0.6（或 filter: grayscale(100%)），否则用户看不出“不可点”。
怎么让禁用状态对键盘和屏幕阅读器也生效？
光靠 CSS 不行，得补语义和行为：
- 真实
<button></button>：直接设disabled，浏览器自动处理焦点、键盘、ARIA - 模拟按钮（如
<div role="button">）：必须同时加 <code>tabindex="-1"+aria-disabled="true" - React/Vue 动态控制时，别只切 class：
style={{ pointerEvents: isDisabled ? 'none' : 'auto' }}得配disabled={isDisabled}或aria-disabled - 点击会落到**渲染顺序上第一个
pointer-events: auto的元素**，不是 z-index 最高的那个；弹窗遮罩里放关闭按钮，别嵌套，得提成同级兄弟元素 - Safari ≤12 对
:active伪类支持差，按钮按下去没反馈 - 用
@supports selector(:has(*))做降级时，:has(.interactive)只感知 DOM 存在，不响应 class 切换后的实时变化 - Tailwind 的
pointer-events-none不支持响应式前缀（如md:pointer-events-none），真要断点控制得手写媒体查询
漏掉可访问性，等于只做了半件事——视觉上灰了，但键盘用户照点不误，屏幕阅读器还读成“可用按钮”。
哪些场景下 pointer-events: none 会失效或出问题？
它在渲染层“透明”，但实际交互比看起来复杂：
最常被忽略的点：它让鼠标“穿透”，但穿透目标未必是你想要的那个元素——调试时打开开发者工具看渲染树顺序，比猜 z-index 更靠谱。
