神奇的css属性pointer-events

【转载】神奇的css属性pointer-events

原文地址： http://www.cnblogs.com/snandy/archive/2011/03/17/1986807.html

绝对定位元素盖住链接或添加某事件handle的元素后，那么该链接的默认行为（页面跳转）或元素事件将不会被触发。
现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-events的css属性。使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为。如下:

<! DOCTYPE html >
< html >
< head >
< meta  charset ="utf-8" >
< title > CSS:pointer-events </ title >
< style  type ="text/css" >
    .overlay1  {
        width : 80px ;
        height : 20px ;
        background : gold ;
        position : absolute ;
        top : 5px ;
        left : 5px ;
        opacity : 0.5 ;
     }
    .overlay2  {
        width : 80px ;
        height : 20px ;
        background : gold ;
        position : absolute ;
        top : 40px ;
        left : 5px ;
        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://mail.sina.com.cn" > SinaMail </ a >
     < br />< br />
     < span  onclick ="alert(3);" > SinaMail </ span >
     < p >
         < input  id ="chx"  type ="checkbox" >
         < label  for ="chx" > 开启穿透点击 </ label >
     </ p >
</ body >
</ html >

默认情况下，链接和span元素被绝对定位的两个div都遮住了。分别点击后无反应，即无法触发链接a的默认行为，无法触发span元素的click事件。但开启穿透点击后支持pointer-events的浏览器Firefox/Safari/Chrome中再次点击链接和span则可以触发相应的行为。