css穿透点击

60 阅读 0 评论 40 点赞

我是靠谱客的博主调皮店员，最近开发中收集的这篇文章主要介绍css穿透点击，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

css属性pointer-events

这绝对定位元素盖住链接或添加某事件handle的元素后，那么该链接的默认行为（页面跳转）或元素事件将不会被触发。

现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-events的css属性。使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为。

如下：

<!DOCTYPE html>
<html>
<head>
　　<meta charset="UTF-8">
　　<title></title>
　　<style>
　　　　.overlay1 {
　　　　　　width:50px;
　　　　　　height:30px;
　　　　　　background:gold;
　　　　　　position:absolute;
　　　　　　top:5px;
　　　　　　left:65px;
　　　　　　opacity:0.5;
　　　　}
　　　　.overlay2 {
　　　　　　width:100px;
　　　　　　height:30px;
　　　　　　background:gold;
　　　　　　position:absolute;
　　　　　　top:60px;
　　　　　　left:25px;
　　　　　　opacity:0.5;
　　　　}
　　　　.pointer{
　　　　　　pointer-events:none;
　　 }
　　</style>
</head>
<body>
　　<div id="a" class="overlay1"></div>
　　<div id="b" class="overlay2"></div>

　　<a href="http://www.baidu.com">Baidu</a>
　　<a href="http://www.baidu.com" "="">Baidu</a>
　　<br/><br/><br/>
　　<span οnclick="alert(3);">SPAN element</span>

　　<p>
　　　　<input id="chx" type="checkbox">
　　　　<label for="chx">穿透点击</label>
　　</p>
<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>
</body>
</html>