pointer-events属性是一个指针属性,是用于控制在什么条件下特定的图形元素可以成为指针事件的目标。
pointer-events属性有很多值,但是对于浏览器来说,适用于HTML元素的只有三个值,其它的几个值都是针对SVG元素的(本身这个属性就来自于SVG技术,是一个SVG属性,并未在任何CSS规范中定义)。
.cantclick{
pointer-events: none;
}
浏览器兼容性
属性 | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
pointer-events | 2.0 | 11.0 | 3.6 | 4.0 | 9.0 |
css语法
pointer-events: auto|none;
#属性值
属性值 | 描述 |
---|---|
auto | 默认值,设置该属性链接可以正常点击访问。 |
none | 元素不能对鼠标事件做出反应 |
initial | 设置该属性为它的默认值 |
inherit | 从父元素继承该属性 |
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 属性的值不影响事件处理。