pointer-events

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 提供适用于您旅程各个阶段的云产品。立即开始使用 价值 200 美元的免费积分!

pointer-events 属性允许控制 HTML 元素如何响应鼠标/触摸事件,包括 CSS 悬停/活动状态、Javascript 中的点击/轻触事件以及光标是否可见。

.avoid-clicks {
  pointer-events: none;
}

虽然 pointer-events 属性可以接受 *11 个* 可能的值,但除了三个值之外,其他所有值都保留用于与 SVG 结合使用。对于任何 HTML 元素,三个有效值为

  • none 会阻止指定 HTML 元素上的所有点击、状态和光标选项
  • auto 恢复默认功能(对于指定了 pointer-events: none; 的元素的子元素很有用)
  • inherit 将使用元素父级的 pointer-events
Check out this Pen!

如上所示,pointer-events 的主要用例是允许点击或轻触行为“穿透”某个元素,到达 Z 轴上它下面的另一个元素。例如,这对于图形叠加层或隐藏带有 opacity 的元素(例如工具提示)并仍然允许选择下层内容的文本很有用。

关注点

  • “在 CSS 中将 pointer-events 用于非 SVG 元素是实验性的。此功能曾经是 CSS3 UI 草案规范的一部分,但由于许多未解决的问题,已推迟到 CSS4。” — Mozilla MDN
  • “如果您将点击事件监听器添加到元素中,然后删除 pointer-events 样式(或将其值更改为 auto),则点击事件将触发指定的函数。基本上,点击事件会尊重 pointer-events 值。” — David Walsh

其他资源

浏览器支持

此浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器从该版本开始支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
43.611124

移动/平板

Android ChromeAndroid FirefoxAndroidiOS Safari
1271272.13.2

在某些浏览器中,当在 <svg> 上使用时,支持更深入,例如,IE 9 支持它。