概述
`pointer-events` 控制元素是否参与指针事件命中测试。常用 `none` 实现事件穿透(允许点击下层),在 SVG/遮罩/图形中也可细化命中策略。
示例
```css
.overlay { pointer-events: none }
.button { pointer-events: auto }
/* 在 SVG 上细化命中 */
svg .shape { pointer-events: visiblePainted }
```
工程建议
- 可访问性:为可交互控件保留命中;避免禁用导致不可达。
- 叠加层与动效:在仅视觉装饰的层使用 `none`;确保焦点管理与键盘可达。
- 兼容:在不同浏览器验证 SVG 命中值;回退到 JS 命中逻辑。
参考与验证
- MDN `pointer-events` 文档:https://developer.mozilla.org/docs/Web/CSS/pointer-events

发表评论 取消回复