首页 > 建站教程 > JS、jQ、TS >  上层div挡住了下层div的点击事件解决办法,pointer-events:none正文

上层div挡住了下层div的点击事件解决办法,pointer-events:none

        今天,我爱模板网在一个《打地鼠》的游戏时,遇到一个棘手的问题:鼠标移动到画布上,锤子跟着动,当点击的时候,理应锤子挥舞,地鼠被打中。可是,只要锤子跟着鼠标跑,就别想打到地鼠。将锤子事件注释掉,鼠标就能打到地鼠。思前想后,应该是锤子这个层阻挡了地鼠的点击事件,因为锤子所在的层刚好在鼠标和地鼠之间。也就是标题所陈述:上层div挡住了下层div的点击事件。
        先看下下面的案例:
<!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的兼容性

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