指针事件属性
最后更新：2026-09-13
pointer-events 指针事件属性
pointer-events 用于控制元素是否能成为鼠标事件（如点击、悬停）的目标。当设置为 none 时，元素会完全忽略鼠标事件，事件会穿透到其下方的元素。它是实现点击穿透、禁用交互和复杂图层交互的常用工具。
| 分类 | |
|---|---|
| 初始值 | auto |
| 继承 | 是 |
| 适用于 | all |
| 可动画 | discrete |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
pointer-events: auto | none;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
auto | none | 关键字 | 元素是否响应鼠标事件 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| pointer-events | ✓ v1 | ✓ v12 | ✓ v1.5 | ✓ v4 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： pointer-events: none 会让元素及其所有子元素都忽略鼠标事件；如果想让子元素恢复响应，需要单独设置 pointer-events: auto。
注意： pointer-events: none 不影响键盘事件和焦点；通过 Tab 键仍可聚焦到该元素，需配合 tabindex="-1" 完全禁用。
❓ 常见问题
Qpointer-events: none 和 disabled 有什么区别？
Adisabled 是 HTML 属性，除了禁用交互，还会改变控件默认样式、阻止表单提交且不触发 click；pointer-events: none 只是让元素忽略指针事件，外观不变，仍可被键盘聚焦、仍会随表单提交。彻底禁用表单元素应优先用 disabled。
Qpointer-events 能阻止触摸事件吗？
A可以。pointer-events: none 对所有指针输入设备一视同仁，包括鼠标、触控笔和触摸屏。设置后元素不会成为任何指针事件的目标，点击、触摸、悬停都会被穿透到下层元素。不过它不影响键盘事件，用 Tab 键仍能聚焦，需配合 tabindex="-1" 才能完全屏蔽。
Qpointer-events: none 和 visibility: hidden 有什么区别？
Avisibility: hidden 会让元素不可见且完全不参与交互，但仍占据布局空间，子元素可以通过 visibility: visible 恢复显示；pointer-events: none 的元素依然可见、可选中、可聚焦，只是忽略了指针事件，事件会穿透到下方元素。前者用于隐藏，后者用于「让事件穿过去」。
Q怎么实现点击穿透（让点击落到下层元素）？
A给覆盖在上层的元素设置 pointer-events: none，指针事件就会「穿透」它到达下层元素。常见场景：遮罩层的纯装饰背景（如图层用 ::before 加半透明遮罩）、地图上的标注层、自定义 tooltip。注意上层如果有需要点击的按钮，要单独给它恢复 pointer-events: auto。
🏷️ 相关属性
💡 相关案例
📚 相关教程
