CSS pointer-events 属性
定义和使用
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;
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 属性的值不影响事件处理。