神奇的css属性pointer-events
绝对定位元素盖住链接或添加某事件handle的元素后,那么该链接的默认行为(页面跳转)或元素事件将不会被触发。
现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-events的css属性。使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为。如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!DOCTYPE html> <html> <head> <meta charset= "utf-8" > <title>CSS:pointer-events</title> <style type= "text/css" > .overlay1 { width:80px; height:20px; background:gold; position:absolute; top:5px; left:5px; opacity:0.5; } .overlay2 { width:80px; height:20px; background:gold; position:absolute; top:40px; left:5px; opacity:0.5; } .pointer{pointer-events:none;} </style> <script type= "text/javascript" > window.onload = function (){ document.getElementById( 'chx' ).onclick = function (){ document.getElementById( 'a' ).className = "overlay1 " + ((this.checked)? "pointer" : "" ); document.getElementById( 'b' ).className = "overlay2 " + ((this.checked)? "pointer" : "" ); } } </script> </head> <body> <div id= "a" class = "overlay1" ></div> <div id= "b" class = "overlay2" ></div> <a href= "http://mail.sina.com.cn" >SinaMail</a> <br/><br/> <span onclick= "alert(3);" >SinaMail</span> <p> <input id= "chx" type= "checkbox" > <label for = "chx" >开启穿透点击</label> </p> </body> </html> |
默认情况下,链接和span元素被绝对定位的两个div都遮住了。分别点击后无反应,即无法触发链接a的默认行为,无法触发span元素的click事件。但开启穿透点击后支持pointer-events的浏览器Firefox/Safari/Chrome中再次点击链接和span则可以触发相应的行为。
如果你正使用 Firefox/Safari/Chrome 浏览本博客,可以点击下面试试
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程