CSS pointer-events 属性

设置元素是否对鼠标事件做出反应:

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

定义和使用

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

默认值: none
默认值: auto
继承:
动画: no。 阅读 animatable
版本: CSS3
JavaScript 语法: object.style.all="initial"      尝试一下

浏览器支持

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

属性
pointer-events 2.0 11.0 3.6 4.0 9.0

CSS 语法

pointer-events: auto|none;

属性值

属性值 描述
auto 默认值,设置该属性链接可以正常点击访问。
none 元素不能对鼠标事件做出反应
initial 设置该属性为它的默认值,查看更多initial
inherit 从父元素继承该属性, 查看更多 inherit

实例代码

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