今天做项目中偶然误把元素加上了pointer-events属性,结果导致后来在js中给该元素加点击事件不能用,检查了半天才发现是这个属性的问题。之前没有好好研究,于是决定仔细研究一下。
一、定义及语法
根据MDN上的解释如下:
CSS属性pointer-events
允许作者控制特定的图形元素在何时成为属性事件的target。当未指定该属性时,SVG内容表现如同visiblePainted
。
除了指定元素不成为鼠标事件的目标,none
值还指示鼠标事件穿过该元素,并指向位于元素下面的元素。
初始值 | auto |
---|---|
适用元素 | all elements |
是否是继承属性 | yes |
适用媒体 | visual |
计算值 | as specified |
是否适用于 CSS 动画 | 否 |
正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
值
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
属性的值不影响事件处理。
二、到底什么是pointer-events
pointer-events如上述所言
支持的值很多,但大多都与SVG相关,我们可以不用理会。而对于我们来讲,需要注意的就是[none|auto]两个属性值了。“auto”没什么好说的,就是在正常状态下的元素。本文将着重研究一下“none”。
pointer-events:none
顾名思意,就是让任何鼠标元素对鼠标事件不起作用,这里的鼠标事件包括css中的hover,同时也会关闭js中的onclick。
三、效果
pointer-events:none
的作用不只是禁用链接hover,打开链接等效果,是真实意义上的将onlick
事件去掉了。但是,他不会关闭键盘时间,比如点击"tab"键会切换<a>标签,设置了pointer-events:none的元素同样有反应。
我们看一下例子:
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .none{ pointer-events: none; } </style> </head> <body> <a href="#1">auto1</a> <a href="#2">none</a> <a href="#3">auto2</a> </body> </html>
注:要想真的将元素鼠标和键盘事件都去掉,可以使用:无href + pointer-events:none