先看下下面的案例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上层div挡住了下层div的点击事件 - 我爱模板网 5.jimth.com</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+都可以只吃了。