CSS3 超实用属性:pointer-events (可穿透图层的鼠标事件)
1、是什么
pointer-events
直译为指针事件,该属性指定在什么情况下某个DOM可以成为鼠标事件的 target。
简而言之,就是允许/禁止DOM的鼠标事件
(click事件、hover事件、mouse事件等鼠标事件)
2、具体属性分析
用法分析:pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all
-
auto
-----默认值,与pointer-events属性未指定时的表现效果相同,对于SVG内容,该值与visiblePainted效果相同 -
none
----- 元素不再是鼠标事件的目标,鼠标不再监听当前层,而去监听下一层中的元素(这里的层指的是图层)。但是如果当前层的子元素设置了pointer-events为其它值,比如auto,鼠标还是会监听这个子元素的。这就是穿透点击事件的关键所在!
-
其它属性都只适用于SVG
visiblePainted
|visibleFill
|visibleStroke
|visible
painted
fill
|stroke
|all
3、实际代码使用中案例:
-
禁止点击
-
图层覆盖覆盖后,底层图层鼠标事件失效时(无法点击),可以通过这个属性来实现,使得点击穿透,来触发底层的鼠标事件。
4、案例
4.1、禁止点击案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .stopClick { pointer-events: none; //元素不再是鼠标事件的目标,禁止当前层的鼠标事件 } </style> </head> <body> <ul> <li><a href="https://www.baidu.com/">百度</a> </li> <li><a href="http://example.com" class="stopClick">一个不能点击的链接</a></li> </ul> </body> </html>
第二个a标签不仅无法被点击,而且没有鼠标手形样式
4.2、点击穿透案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .bottom { background: yellow; width: 100px; height: 100px; } .top { width: 100px; height: 100px; position: absolute; top: 0; left: 0; z-index: 100; display: flex; justify-content: center; align-items: center; /*不再监听当前图层的鼠标事件,而去监听下一层中元素的鼠标事件*/ pointer-events: none; } .top b{ display:inline-block; margin: 0 auto; /*子元素修改pointer-events,允许触发鼠标事件*/ pointer-events:auto; } </style> </head> <body> <!-- 下方div --> <div class="bottom"> <a href="http://www.baidu.com">下一层--百度</a> </div> <!-- 上方div --> <div class="top" onclick="topSay()"> <b id="topTxt">顶层</b> </div> <script> document.getElementById("topTxt").onclick = function(evt){ alert('顶层内b元素的事件!'); evt.stopPropagation(); //阻止了事件的向上传播,否则就会触发父容器的alert事件。 } function topSay(){ alert('顶层事件') } </script> </body> </html>
分析如下
原本底层被顶层覆盖,使得底层的百度跳转事件无法被触发。但是这里顶层设置了
pointer-events: none;
,使得顶层的鼠标事件被禁止,浏览器转而去监听下一层的鼠标事件,这就使得百度跳转事件又可以生效了。由于顶层内的子元素b继承了顶层的
pointer-events: none;
,使得b也无法触发鼠标事件,但是,b元素其自身又重新设置了pointer-events:auto;
,使得b又可以触发鼠标事件了。在b元素的点击事件上,如果不加evt.stopPropagation(),去阻止事件冒泡,通过点击b,也会触发父容器的点击事件
5、兼容性
- IE 11+
- Firefox 3.6+
- Chrome 4.0+
- Safari 6.0
- Opera 15.0
- iOS Safari 6.0
- Android Browser 2.1+
- Android Chrome 18.0+
-
本文来自博客园,作者:喆星高照,转载请注明原文链接:https://www.cnblogs.com/houxianzhou/p/18220412