先看下下面的案例:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>上层div挡住了下层div的点击事件 - 我爱模板网 www.5imoban.net</title> <style> div{width:500px; height:500px; background:rgba(0,0,0,.4); font-size:20px; font-family:"微软雅黑"; color:#fff; cursor:default;} #up{position:absolute; top:250px; left:250px;} #down{} </style> <script> window.onload=function(){ document.getElementById("down").onclick = function(){ alert("下层div被点击了!"); }; } </script> </head> <body> <div id="up">上层div,没有任何点击事件,挡住了下层div的点击事件。点击重合的部分,看看能不能触发!</div> <div id="down">下层div,有点击事件。请尝试点击未被盖住的部分,和盖住的部分,看看效果</div> </body> </html>如上例所示,“up”层和“down”层重合的地方,点击是没有效果的,因为“up”层定位了,在“down”层的上面,而点击事件是给“down”层的,那么怎么办呢。找了好久百度,终于找到了一个比较好的解决办法:给“up”层,即遮挡层一个css样式即可:pointer-events:none。修改后的“up”层的样式为:
#up{position:absolute; top:250px; left:250px; pointer-events:none;}再到火狐、谷歌、IE去试试,发现重合的地方也能触发点击事件了。
那么,这个css的兼容性怎么样呢?看下图:
pointer-events:none的兼容性
通过上图,可以看到 pointer-events:none 的兼容性还是不错的。IE10+都可以只吃了。