神奇的css属性pointer-events（穿透绝对定位元素去触发下面元素的某些行为）__div+css

神奇的css属性pointer-events（穿透绝对定位元素去触发下面元素的某些行为）

时间： 2010-10-13 03:50:01　阅读次数：5201

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

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<title>CSS:pointer-events</title>
<style type="text/css">
.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>
<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> 
</head>
<body>
<div id="a" class="overlay1"></div>
<div id="b" class="overlay2"></div>
<a href="Baiduhttp://www.ffasp.com">ffasp</a> <a href="ffasphttp://www.ffasp.com"">ffasp</a>
<br/><br/><br/> 
<span onclick="alert(3);">SPAN element</span>
<p>
  <input id="chx" type="checkbox">
  <label for="chx">穿透点击</label>
</p>
</body>
</html>

提示：您可以先修改部分代码再运行