绝对定位元素盖住链接或添加某事件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. 本人对于JavaScript的一些总结

    类型.值和变量 1.原始类型   数字.字符串和布尔   null空  undefined未定义 2.对象类型 3.类  Array  Function Date RegExp  Error 4.js ...

  2. 单调队列-hdu-4193-Non-negative Partial Sums

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4193 题目大意: 给n个数,a0,a1,...an,求ai,ai+1,...an,a1,a2,... ...

  3. 一个非常给力的播放器video-js

    video-js采用的是html5播放器. 在不支持html5的浏览器会自动切换成flash. video-js的官网http://www.videojs.com/ 看看下载的demo就知道个大概了. ...

  4. Oracle SQL函数之转换函数

    chartorowid(c1) [功能]转换varchar2类型为rowid值 [参数]c1,字符串,长度为18的字符串,字符串必须符合rowid格式 [返回]返回rowid值 [示例] SQL> ...

  5. [python笔记][第二章Python序列-list]

    2016/1/27学习内容 第二章 Python序列-list list常用操作 list.append(x) list.extend(L) list.insert(index,x) list.rem ...

  6. 【计算几何初步-代码好看了点线段相交】【HDU2150】Pipe

    题目没什么 只是线段相交稍微写的好看了点 Pipe Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Jav ...

  7. PL/SQL分页查询

    create or replace procedure fenye(tabelname in varchar2,currentpage in number,pageSize in number,inW ...

  8. UIImageView~动画播放的内存优化

    我目前学到的知识,播放动画的步骤就是下面的几个步骤,把照片资源放到数组里面,通过动画animationImage加载数组,设置动画播放的 时间和次数完成播放. 后来通过看一些视频了解到:当需要播放多个 ...

  9. C#之回到了最初的起点----解决方案、项目、程序集、命名空间

    C#之回到了最初的起点----解决方案.项目.程序集.命名空间 ——Percy 初学者很容易把这些概念搞混淆.先说说项目(Project),通俗的说,一个项目可以就是你开发的一个软件.在.Net下,一 ...

  10. dir_colors linux颜色配置

    在控制台下,用ls,就会发现,shell将不同类型的文件项目显示为不同的颜色.者可以提高效率,不用ls -l便能大概的把各个文件的类型情况了解一下. 你有没有想过更改这个着色配置呢? 其实,在/etc ...