概述
CSS属性pointer-events
允许作者控制特定的图形元素在何时成为鼠标事件的target。当未指定该属性时,SVG内容表现如同visiblePainted
。
除了指定元素不成为鼠标事件的目标,none
值还指示鼠标事件穿过该元素,并指向位于元素下面的元素。
初始值 | auto |
---|---|
适用元素 | all elements |
是否是继承属性 | yes |
适用媒体 | visual |
计算值 | as specified |
Animation type | discrete |
正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
值
auto
- 与
pointer-events
属性未指定时的表现效果相同,对于SVG内容,该值与visiblePainted
效果相同 none
- 元素永远不会成为鼠标事件的target。但是,当其后代元素的
pointer-events
属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。 visiblePainted
-
只适用于SVG。元素只有在以下情况才会成为鼠标事件的目标:
visibility
属性值为visible
,且鼠标指针在元素内部,且fill
属性指定了none
之外的值visibility
属性值为visible
,鼠标指针在元素边界上,且stroke
属性指定了none
之外的值
visibleFill
- 只适用于SVG。只有在元素
visibility
属性值为visible
,且鼠标指针在元素内部时,元素才会成为鼠标事件的目标,fill
属性的值不影响事件处理。 visibleStroke
- 只适用于SVG。只有在元素
visibility
属性值为visible
,且鼠标指针在元素边界时,元素才会成为鼠标事件的目标,stroke
属性的值不影响事件处理。 visible
- 只适用于SVG。只有在元素
visibility
属性值为visible
,且鼠标指针在元素内部或边界时,元素才会成为鼠标事件的目标,fill
和stroke
属性的值不影响事件处理。 painted
-
只适用于SVG。元素只有在以下情况才会成为鼠标事件的目标:
- 鼠标指针在元素内部,且
fill
属性指定了none
之外的值 - 鼠标指针在元素边界上,且
stroke
属性指定了none
之外的值
visibility
属性的值不影响事件处理。 - 鼠标指针在元素内部,且
fill
- 只适用于SVG。只有鼠标指针在元素内部时,元素才会成为鼠标事件的目标,
fill
和visibility
属性的值不影响事件处理。 stroke
- 只适用于SVG。只有鼠标指针在元素边界上时,元素才会成为鼠标事件的目标,
stroke
和visibility
属性的值不影响事件处理。 all
- 只适用于SVG。只有鼠标指针在元素内部或边界时,元素才会成为鼠标事件的目标,
fill
、stroke
和visibility
属性的值不影响事件处理。
Examples
Example 1
/* Example 1: Makes all the img non-reactive to any mouse events such as dragging, hovering, clicking etc */ img { pointer-events: none; }
Example 2
点击链接 https://example.com 时,不会跳转
<ul> <li><a href="https://developer.mozilla.org/">MDN</a></li> <li><a href="https://example.com">example.com</a></li> </ul>
a[href="https://example.com"] { pointer-events: none; }
Notes
使用pointer-events
来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永远不会触发。如果元素后代明确指定了pointer-events
属性并允许其成为鼠标事件的目标,那么指向该元素的任何事件在事件传播过程中都将通过父元素,并以适当的方式触发其上的事件侦听器。当然,位于父元素但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获(鼠标活动将会穿过父元素而指向位于其下面的元素)。
我们希望为HTML提供更为精细的控制(而不仅仅是auto
和none
),以控制元素哪一部分何时会捕获鼠标事件。如果你有独特的想法,请添加至wiki页面的Use Cases部分,以帮助我们如何针对HTML扩展pointer-events
。
该属性也可用来提高滚动时的帧频。的确,当滚动时,鼠标悬停在某些元素上,则触发其上的hover效果,然而这些影响通常不被用户注意,并多半导致滚动出现问题。对body
元素应用pointer-events:none
,禁用了包括hover
在内的鼠标事件,从而提高滚动性能。
Specifications
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 1.1 (Second Edition) pointer-events |
Recommendation |
Its extension to HTML elements, though present in early drafts of CSS Basic User Interface Module Level 3, has been pushed to its level 4.
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
SVG support | 1.0 | 1.5 (1.8) | 9.0 | 9.0 (2.0) | 3.0 (522) |
HTML/XML content | 2.0 | 3.6 (1.9.2) | 11.0 | 15.0 | 4.0 (530) |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? |
See also
- The SVG attribute
pointer-events
- WebKit Specs PointerEventsProperty extended for use in (X)HTML content
- 60fps scrolling using pointer-events: none