Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

pointer-events

概述

CSS属性pointer-events允许作者控制特定的图形元素在何时成为鼠标事件的target。当未指定该属性时,SVG内容表现如同visiblePainted

除了指定元素不成为鼠标事件的目标,none值还指示鼠标事件穿过该元素,并指向位于元素下面的元素。

初始值auto
适用元素all elements
是否是继承属性yes
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序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,且鼠标指针在元素内部或边界时,元素才会成为鼠标事件的目标,fillstroke属性的值不影响事件处理。
painted
只适用于SVG。元素只有在以下情况才会成为鼠标事件的目标:
 
  • 鼠标指针在元素内部,且fill属性指定了none之外的值
  • 鼠标指针在元素边界上,且stroke属性指定了none之外的值
visibility属性的值不影响事件处理。
fill
只适用于SVG。只有鼠标指针在元素内部时,元素才会成为鼠标事件的目标,fillvisibility属性的值不影响事件处理。
stroke
只适用于SVG。只有鼠标指针在元素边界上时,元素才会成为鼠标事件的目标,strokevisibility属性的值不影响事件处理。
all
只适用于SVG。只有鼠标指针在元素内部或边界时,元素才会成为鼠标事件的目标,fillstrokevisibility属性的值不影响事件处理。

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提供更为精细的控制(而不仅仅是autonone),以控制元素哪一部分何时会捕获鼠标事件。如果你有独特的想法,请添加至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

文档标签和贡献者

 此页面的贡献者: ruoyiqing, teoli, hutuxu
 最后编辑者: ruoyiqing,