pointer-events
pointer-events属性用于特定情况下将图形元素指定为事件目标。
请注意这是一个SVG属性，在任何CSS规范中并没有定义。
pointer-events属性应用于SVG元素的值有许多个，但是只有三个值可以应用于HTML元素。
当pointer-events应用于HTML元素上时，它可以用来指定元素是否可以响应鼠标(触摸)事件。它可以用来阻止点击、状态(CSS active,focus,hover状态)，和游标事件(例如:在链接上显示pointer光标)
你也可以让元素响应于指针事件(auto),或者阻止响应(none)。如果你阻止元素响应于指针事件，那么该元素的子节点的元素将会成为这些事件的目标。如果你单击元素，其子节点元素将会接收该单击事件。这种情况同样适用于hover和一些其他游标操作。例如，利用pointer-events:none你可以获取一个元素的子元素中的文本(可以参考下面的实例)。
pointer-events属性在不同场景中都可以十分有用。这个属性一个很好的优点是，允许你利用pointer-events:none创建60fps 的滚动。关于它是如何工作的，Ryan Seddon写了一篇很值得一读的文章。
笔记
元素上禁用指针的事件可以被子元素所覆盖: 如果元素的子元素具有pointer-events:auto,该子元素可以处理并响应单击事件，即使父元素不具有此功能。
如上文所述，pointer-events属性是一个SVG属性。尽管存在于早期用户接口模块Level 3的草稿中，它已经在该模块之中被移除并添加到Level 4之中。如果想了解更多，请点击这里。
官方语法
语法
pointer-events: visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none | inherit
正式语法中的值适用于SVG元素，仅下面这三个值适用于HTML元素:
pointer-events: auto | none | inherit
- 初始值:
auto - 适用于:所有元素
- 动画:无
值
auto: 默认值。可以使用指针事件。元素响应于指针事件，阻止该元素的子元素对其作出响应。none: 元素上的指针事件被禁用。元素不会响应于指针事件。就像该元素不存在一样，元素的子元素响应于指针事件。inherit: 元素从其父级继承pointer-events的值。
备注
关于其余值的详细信息，请参考SVG规范。
实例
下面的实例将overlay元素置于整个页面，如果用户在页面上执行某些操作，例如一些Javascript方法，overlay就会就会褪变成视图。为了防止其与页面其余元素的指针事件叠加，所以我们就可以将其子元素上的事件取消。
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
/* ... */
pointer-events: none;
}
这样，使用Javascript，该元素就可以褪色到视图之中，然后就可以启用事件，以便于用户可以与其进行交互。
在线实例
在下面的示例之中，overly具有pointer-events:none的属性值,所以你就可以单击它下面的锚点标记，获取文本。请注意，当你将鼠标悬停在链接上时，光标如何变成了一个指针(手型)？原因在于其上的悬停状态被触发。
尝试将none值更改为auto,观察它如何使overlay阻止了链接状态被触发或者其余一些事件的触发。
浏览器支持
扩展阅读
- CSS3 pointer-events:none应用举例及扩展
- 60fps scrolling using pointer-events: none
- 可缩放矢量图形 1.1
- 穿透的 div ( pointer-events )
- CSS pointer-events
本文根据@Sara Soueidan的《pointer-events》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://tympanus.net/codrops/css_reference/pointer-events。
如需转载，烦请注明出处：https://www.fedev.cn/css3/css-reference/pointer-events.htmljordan retro 11 mens kids