pointer-events: none 彻底禁用所有指针事件（点击、悬停、拖拽、右键、focus），但不影响键盘操作、tabindex、语义读取及屏幕阅读器；子元素设 auto 可覆盖父级，但 IE10-不支持；表单控件应优先用 disabled 而非该 CSS 属性。
pointer-events: none 会阻止哪些交互
它不只是让点击失效，而是彻底禁用所有指针相关事件：点击、悬停、拖拽、右键菜单、focus（如果元素本身可聚焦）都不会触发。但注意：tabindex 和键盘操作（如回车提交表单）不受影响——除非你同时移除了 tabindex 或用了 disabled。
常见错误现象：button 加了 pointer-events: none 后鼠标看起来“点不动”，但用户仍能按空格或回车触发；或者父容器设了 none，子元素用 pointer-events: auto 试图恢复，结果在某些旧版 Safari 中不生效。
- 只禁用指针事件，不影响键盘导航和屏幕阅读器的语义读取
- 子元素显式设置
pointer-events: auto可以覆盖父级，但 IE10 及更早版本不支持该继承行为 - 对
input、textarea等表单控件，建议优先用disabled属性而非pointer-events，否则可能绕过表单校验逻辑
为什么不能只靠 CSS 禁用交互
CSS 是表现层，而交互控制本质是状态管理。比如一个按钮被禁用，往往意味着背后业务逻辑也应暂停执行——仅靠 pointer-events: none 不会自动阻止 JS 中绑定的 click 监听器被调用（除非事件没冒泡上来），也不会改变按钮的 disabled 属性值，导致表单提交时仍可能被包含在数据中。
使用场景：适合临时视觉屏蔽（如加载中遮罩层）、避免误触（弹窗背景灰掉但保留滚动）、或做“伪禁用”（需要保留焦点/键盘操作）。
立即学习“前端免费学习笔记（深入）”；
- 若需真正禁用表单控件，请用
disabled属性 + 对应的 CSS 样式（如opacity: 0.5） - 若要禁用整个区域但允许内部某按钮可用，必须给该按钮单独加
pointer-events: auto - React/Vue 中动态切换禁用状态时，别只改 class，记得同步更新
disabled属性或组件状态
pointer-events 在不同元素上的兼容性差异
pointer-events 默认对大多数 HTML 元素有效，但对 svg 元素、iframe、以及某些内联替换元素（如 img）的行为略有不同。尤其要注意：设置在 iframe 上时，它只控制 iframe 自身边框是否响应鼠标，无法阻止其内部内容的交互。
性能影响几乎为零，但它会影响事件捕获路径。例如父 div 设为 none，子 span 即使设为 auto，在部分安卓 WebView 中仍可能收不到事件。
-
pointer-events: none对select下拉框无效，点击箭头仍会打开选项 - 在 SVG 中，
pointer-events可设为visiblePainted、fill等细粒度值，HTML 元素不支持这些值 - IE11 支持
pointer-events: none，但不支持auto以外的其他值（如stroke）
替代方案：什么时候该用 JavaScript 控制
当你要做的不只是“不让点”，而是“根据条件决定是否允许交互”，比如权限控制、流程步骤锁、或依赖异步校验结果时，CSS 就不够用了。这时候应在 JS 层统一处理状态，并同步更新样式和属性。
容易踩的坑：只在 JS 里加个 event.preventDefault() 而不更新 UI 状态，用户看到按钮可点却无反应；或者多个地方分别监听 click，其中一个用了 pointer-events: none，另一个没处理，导致行为不一致。
- 推荐组合：JS 更新
disabled属性 + CSS 设置[disabled] { pointer-events: none; } - 避免在事件回调里反复判断
if (el.style.pointerEvents === 'none') {...}，应该查真实状态（如el.hasAttribute('disabled')） - 对自定义组件（如封装的
MyButton），把禁用逻辑收口到 props，不要让用户手动写style.pointerEvents
最常被忽略的是语义和可访问性：禁用交互的同时，得确保屏幕阅读器能感知状态变化，比如加上 aria-disabled="true"。不然对辅助技术用户来说，那个按钮就只是“看不见的幽灵”。
