今天,我爱模板网在一个《打地鼠》的游戏时,遇到一个棘手的问题:鼠标移动到画布上,锤子跟着动,当点击的时候,理应锤子挥舞,地鼠被打中。可是,只要锤子跟着鼠标跑,就别想打到地鼠。将锤子事件注释掉,鼠标就能打到地鼠。思前想后,应该是锤子这个层阻挡了地鼠的点击事件,因为锤子所在的层刚好在鼠标和地鼠之间。也就是标题所陈述:上层div挡住了下层div的点击事件。
先看下下面的案例:
05 | < title >上层div挡住了下层div的点击事件 - 我爱模板网 www.5imoban.net</ title > |
07 | div{width:500px; height:500px; background:rgba(0,0,0,.4); font-size:20px; font-family:"微软雅黑"; color:#fff; cursor:default;} |
08 | #up{position:absolute; top:250px; left:250px;} |
12 | window.onload=function(){ |
13 | document.getElementById("down").onclick = function(){ |
21 | < div id = "up" >上层div,没有任何点击事件,挡住了下层div的点击事件。点击重合的部分,看看能不能触发!</ div > |
22 | < div id = "down" >下层div,有点击事件。请尝试点击未被盖住的部分,和盖住的部分,看看效果</ div > |
如上例所示,“up”层和“down”层重合的地方,点击是没有效果的,因为“up”层定位了,在“down”层的上面,而点击事件是给“down”层的,那么怎么办呢。找了好久百度,终于找到了一个比较好的解决办法:给“up”层,即遮挡层一个css样式即可:pointer-events:none。修改后的“up”层的样式为:
1 | #up{ position : absolute ; top : 250px ; left : 250px ; pointer-events: none ;} |
再到火狐、谷歌、IE去试试,发现重合的地方也能触发点击事件了。
那么,这个css的兼容性怎么样呢?看下图:

pointer-events:none的兼容性
通过上图,可以看到 pointer-events:none 的兼容性还是不错的。IE10+都可以只吃了。