直接给元素加 pointer-events: none 能禁用所有指针事件（点击、悬停、右键、拖拽），但不阻止键盘操作、表单提交或屏幕阅读器识别，仅实现视觉与鼠标层屏蔽；它对表单控件效果有限，真正禁用应优先使用原生 disabled 属性。
直接给元素加 pointer-events: none 就能禁用鼠标点击、悬停、右键、拖拽等所有指针事件，但它不碰键盘操作、表单提交或屏幕阅读器——这不是“完全禁用”，而是一种视觉+鼠标层的屏蔽。
基础写法与生效范围
只需一行 CSS：
-
div { pointer-events: none; }—— 元素彻底对鼠标“透明”，点击会落到它下面的元素上（按渲染顺序，不是 z-index） - 支持所有常见 HTML 元素，包括
<a></a>、<span></span>、<div>，但对 <code><input>、<button></button>、<select></select>等表单控件效果有限（比如 select 的下拉箭头仍可点） - IE11+ 支持，IE10 及更早版本不支持；移动端 Safari 和 Chrome 均稳定支持
- 必须确保该按钮是父容器的直接子元素（中间不能隔一层未设
auto的 wrapper） - 旧版 Safari（≤15.3）和部分安卓 WebView 中，即使写了
auto也可能不生效 - 更稳妥的做法：把可交互元素提到父级同层，用
z-index控制叠放顺序，避免依赖继承恢复 -
<button disabled></button>会自动禁键盘焦点、不参与表单提交、触发浏览器默认禁用样式 -
pointer-events: none不影响tabindex，回车/空格仍能触发按钮的onclick，且它的value还会被序列化进表单数据 - 真正要禁用表单控件，请用原生
disabled属性 + 配套 CSS（如opacity: 0.5） - 加载遮罩层（半透明蒙板），同时保留内部关闭按钮可点
- 背景水印、装饰性图标、协作光标伪元素等纯视觉内容
- 临时防止误触（如弹窗打开时灰掉背景但允许滚动）
- Canvas 或 SVG 容器整体禁用默认事件，需要时再手动坐标映射处理
- 动画中只改
opacity却忘了同步切pointer-events，导致淡出阶段还能点 - 移动端在编辑器根容器设
none，结果软键盘不弹出 - 以为设了
none就安全了——权限控制必须后端校验，CSS 层面毫无防护力
父子嵌套时的注意事项
父元素设了 pointer-events: none，子元素默认也失效。想让某个按钮仍可点？不能只靠写 pointer-events: auto：
和表单控件打交道的正确姿势
别用 pointer-events: none 替代 disabled：
实际常用场景与避坑提示
适合用 pointer-events: none 的地方：
容易翻车的地方：
