指针事件 | pointer-events

该pointer-eventsCSS属性指定在什么情况下（如果有的话）一个特定的图形元素都可以成为目标鼠标事件。

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill;    /* SVG only */
pointer-events: visibleStroke;  /* SVG only */
pointer-events: visible;        /* SVG only */
pointer-events: painted;        /* SVG only */
pointer-events: fill;           /* SVG only */
pointer-events: stroke;         /* SVG only */
pointer-events: all;            /* SVG only */

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

当此属性未指定时，visiblePainted值的相同特征适用于SVG内容。

除了指示该元素不是鼠标事件的目标之外，该值none指示鼠标事件“穿过”该元素，而是针对该元素下面的任何内容。

初始值	auto
适用于	所有元素
遗传	是
媒体	visual
计算值	作为指定
动画类型	离散的
规范的顺序	形式语法定义的独特的非模糊顺序

语法

该pointer-events属性被指定为从下面的值列表中选择的单个关键字。

值

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属性的值不影响事件处理。

形式语法

auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

实例

例1

/* Example 1: Makes all the img non-reactive to any mouse events such as dragging, hovering, clicking etc */
img {
  pointer-events: none;
}

例2

使链接到http：//example.com没有反应。

<ul>
  <li><a href="https://developer.mozilla.org">MDN</a></li>
  <li><a href="http://example.com">example.com</a></li>
</ul>

a[href="http://example.com"] {
  pointer-events: none;
}

注记

注意，通过使用防止元素被鼠标事件的目标pointer-events也并不一定意味着元素上的鼠标事件监听器不能或不会被触发。如果其中一个元素的子元素pointer-events明确设置为允许该子元素成为鼠标事件的目标，那么当事件沿父元素传播时，针对该子元素的任何事件都将通过父元素，并根据情况触发父元素上的事件侦听器。当然，屏幕上被父母覆盖而不是被孩子覆盖的点上的任何鼠标活动都不会被孩子或父母抓住（它将“穿过”父母并瞄准下面的任何东西）。

我们希望在HTML中提供更精细的控制（不仅仅是auto和none），而元素的哪些部分将导致它“捕捉”鼠标事件，以及何时。为了帮助我们决定如何pointer-events进一步扩展HTML，如果您有任何特定的事情，您希望能够使用此属性，请将其添加到此维基页面的用例部分（不要担心关于保持整洁）。

规范

Specification	Status	Comment
Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of 'pointer-events' in that specification.	Recommendation	?

它对HTML元素的扩展，虽然出现在CSS基本用户界面模块级别3的早期草稿中，但已被推到了它的4级...

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
SVG support	1.0	(Yes)	1.5 (1.8)	11.0	9.0 (2.0)	3.0 (522)
HTML/XML content	2.0	(Yes)	3.6 (1.9.2)	11.0	15.0	4.0 (530)

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	2.1	(Yes)	3.6	11	33	3.2

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18