|
精华帖 (0) :: 良好帖 (4) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-06-22
最后修改：2010-08-17
绝对定位元素盖住链接或添加某事件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="http://www.baidu.com">Baidu</a> <a href="http://www.baidu.com"">Baidu</a>
<br/><br/><br/>
<span onclick="alert(3);">SPAN element</span>
<p>
<input id="chx" type="checkbox">
<label for="chx">穿透点击</label>
</p>
</body>
</html>
相关资源： https://developer.mozilla.org/en/CSS/pointer-events
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-06-23
哇塞，这个属性超级的好
|
| 返回顶楼 | |
|
发表时间：2010-06-24
最后修改：2010-06-24
真是不错~但是IE太愁人了啊！
最近让IE给我搞得头皮屑都出来了！ |
| 返回顶楼 | |
|
发表时间：2010-06-24
哇靠，楼主都研究到这种程度了
|
| 返回顶楼 | |
|
发表时间：2010-06-25
这个牛X。受惊了～
|
| 返回顶楼 | |
|
发表时间：2010-06-25
好东西啊，只可惜IE不支持
|
| 返回顶楼 | |
|
发表时间：2010-06-25
IE的滤镜你们也不支持
|
| 返回顶楼 | |
|
发表时间：2010-06-25
搞不清楚有啥意义 呵呵 了解下
|
| 返回顶楼 | |
|
发表时间：2010-06-25
火狐也不支持啊！ =。=
|
| 返回顶楼 | |
|
发表时间：2010-06-27
ie6不支持,所以直接抛弃,虽然是好东西,眼馋啊
|
| 返回顶楼 | |
