职业IT人-IT人生活圈

 找回密码
 成为会员
搜索
查看: 670|回复: 10

神奇的css属性pointer-events

[复制链接]
会玩就好 发表于 2011-6-15 15:04 | 显示全部楼层 |阅读模式
  
绝对定位元素盖住链接或添加某事件handle的元素后,那么该链接的默认行为(页面跳转)或元素事件将不会被触发。

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

如下:

Html代码  
<!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>  

<!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



pointer-events.rar (667 Bytes)
下载次数: 214

爱车车 发表于 2011-6-15 15:04 | 显示全部楼层
哇塞,这个属性超级的好

愚人 发表于 2011-6-15 15:04 | 显示全部楼层
真是不错~但是IE太愁人了啊!
最近让IE给我搞得头皮屑都出来了!

曾经的小孩 发表于 2011-6-15 15:04 | 显示全部楼层
哇靠,楼主都研究到这种程度了

叫我小乖 发表于 2011-6-15 15:04 | 显示全部楼层
这个牛X。受惊了~

江南枫 发表于 2011-6-15 15:04 | 显示全部楼层
好东西啊,只可惜IE不支持

楠楠 发表于 2011-6-15 15:05 | 显示全部楼层
IE的滤镜你们也不支持

紫衿 发表于 2011-6-15 15:05 | 显示全部楼层
搞不清楚有啥意义 呵呵 了解下

木已 发表于 2011-6-15 15:05 | 显示全部楼层
火狐也不支持啊! =。=

gz-vps 发表于 2011-6-15 15:05 | 显示全部楼层
ie6不支持,所以直接抛弃,虽然是好东西,眼馋啊


shmilyyu 发表于 2011-8-11 14:31 | 显示全部楼层
哎 我我我怎么办啊??
您需要登录后才可以回帖 登录 | 成为会员

本版积分规则

QQ|手机版|小黑屋|网站帮助|职业IT人-IT人生活圈 ( 粤ICP备12053935号-1 )|网站地图
本站文章版权归原发布者及原出处所有。内容为作者个人观点,并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是信息平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽造成漏登,请及时联系我们,我们将根据著作权人的要求立即更正或者删除有关内容。

GMT+8, 2024-3-29 21:32 , Processed in 0.151303 second(s), 20 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表