CSS pointer-events 属性

 
div.ex1 {
  pointer-events: none;
}
 
div.ex2 {
  pointer-events: auto;
}

定义和使用

pointer-events 属性用于设置元素是否对鼠标事件做出反应。

浏览器支持

表格中的数字表示支持该属性的浏览器最低版本号。

CSS 语法

pointer-events: auto|none;

属性值

/* 属性值 */

pointer-events: auto;

pointer-events: none;

pointer-events: visiblePainted; /* 只适用于 SVG */

pointer-events: visibleFill;    /* 只适用于 SVG */

pointer-events: visibleStroke;  /* 只适用于 SVG */

pointer-events: visible;        /* 只适用于 SVG */

pointer-events: painted;        /* 只适用于 SVG */

pointer-events: fill;           /* 只适用于 SVG */

pointer-events: stroke;         /* 只适用于 SVG */

pointer-events: all;            /* 只适用于 SVG */



/* 全局值 */

pointer-events: inherit;

pointer-events: initial;

pointer-events: unset;

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