pointer-events_html/css

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

值

备注

关于其余值的详细信息，请参考 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阻止了链接状态被触发或者其余一些事件的触发。