绝对定位元素盖住链接或添加某事件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则可以触发相应的行为。

css属性pointer-events的更多相关文章

  1. 浏览器 Pointer Events

    前言 Pointer Events是一套触控输入处理规格,支持Pointer Events的浏览器包括了IE和Firefox,最近Chrome也宣布即将支持该处理规则. PointerEvent Po ...

  2. 第六篇、CSS属性

    <!--1.可继承性 visible(可见的):hidden --掩藏,但是结构还保存 cursor(光标样式):pointer(手指)crosshair(十字架) 一般是文字控制属性 内联标签 ...

  3. css属性之@media

    Base Browsers: IE6.0+, Firefox2.0+, Chrome4.0+, Safari6.0+, Opera15.0+ <expression>:指定媒体查询使用的媒 ...

  4. HTML标签CSS属性默认值汇总

    HTML标签CSS属性默认值,在你需要还原默认值的时候比较有用. 以前一直在找这份文档,今天偶然在网上看到了.除了inline和block的定义,主要是要注意body|h1~h6|blockquote ...

  5. css属性分类介绍

    css属性分类介绍 CSS分类目录 文本/字体/颜色 文本相关 字体相关 颜色相关 背景相关 大小/布局 大小属性 margin 外边距 padding 内边距 border 边框 position ...

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

    绝对定位元素盖住链接或添加某事件handle的元素后,那么该链接的默认行为(页面跳转)或元素事件将不会被触发.现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-ev ...

  7. 点赞功能实现 $(tag).css('属性', '样式')

    1. 创建标签 document.createElement() 2.$(tag).css('属性', 样式) 赋予标签属性样式 3.设置定时器 改变位置 大小 <!DOCTYPE html&g ...

  8. css属性（常用属性整理）

    摘要:本文是我在学习前端的过程中整理的一些常用css属性,部分是css3新增的,因能力有限,文中如有错误,欢迎提出,我会及时修改.希望对大家有帮助! CSS属性 CSS属性 1 1. css颜色属性 ...

  9. HTML CSS 属性大全

    CSS 属性大全 文字属性 「字体族科」(font-family),设定时,需考虑浏览器中有无该字体. 「字体大小」(font-size),注意度量单位.<绝对大小>|<相对大小&g ...

随机推荐

  1. Python高阶函数

    在Python中,函数名也是一个变量,可以进行赋值  高阶函数是至少满足下列一个条件的函数: 接受一个或多个函数作为输入 输出一个函数 函数名也可以作为函数参数,还可以作为函数返回值 def f(n) ...

  2. Collections你用对了吗？

    .Net有两类基础的集合类型:List和Dictionary.List是基于Index的,Dictionary是基于key的.集合类型一般实现了IEnumberable,ICollection或者Il ...

  3. javax inect

    Spring 3 and JSR-330 @Inject and @Named example By mkyong | September 16, 2012 | Viewed : 86,399 tim ...

  4. First Bad Version

    You are a product manager and currently leading a team to develop a new product. Unfortunately, the ...

  5. Android通过PHP连接MySQL(用到Json)

    1下载phpnow 如果已经有mysql 则需要换一个端口 在服务器机器上的phpnow安装目录E:\PHPnow-1.5.5\htdocs下新建一个test.php文件: 其中我用的数据库是test ...

  6. 【JSONKit】序列化Dictionary崩溃

    jsonkit通过Dictionary转换成JSON字符串时总是崩溃. 解析代码: 崩溃地点 分析是因为我的参数中全是数字   找了一下原因,不知道知道怎么设置,(求大神指点) 这里有一个折中办法使用 ...

  7. Windows环境搭建Red5流媒体服务器指南(转)

    Windows环境搭建Red5流媒体服务器指南 Windows环境搭建Red5流媒体服务器指南 测试环境:Windows 7 一.   下载安装程序 red5-server 下载地址 https:// ...

  8. ENOVIA 基础

    Part 零件 Part Master PM 如何表示零件:每当创建一个Part(给定一个Part Number),都回创建一个Part Master Part Master管理每个Part的最本质的 ...

  9. weblogic上部署应用程序

    weblogic上部署应用程序有三种方法: 一:修改配置文件config.xml在文件中加入如下代码片段: <app-deployment> <name>FAB</nam ...

  10. 熟悉Git使用

    熟悉Git使用安装git后请修改提交用的用户名和邮箱命令:git config --global user.name "Your Name" git config --global ...