zoukankan      html  css  js  c++  java
  • css属性pointer-events

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

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>CSS:pointer-events</title>
     6 <style type="text/css">
     7     .overlay1 {
     8         80px;
     9         height:20px;
    10         background:gold;
    11         position:absolute;
    12         top:5px;
    13         left:5px;
    14         opacity:0.5;
    15     }
    16     .overlay2 {
    17         80px;
    18         height:20px;
    19         background:gold;
    20         position:absolute;
    21         top:40px;
    22         left:5px;
    23         opacity:0.5;
    24     }
    25     .pointer{pointer-events:none;}
    26 </style>
    27 <script type="text/javascript">
    28 window.onload = function(){
    29     document.getElementById('chx').onclick = function(){
    30         document.getElementById('a').className 
    31             = "overlay1 " + ((this.checked)? "pointer" : "");
    32         document.getElementById('b').className 
    33             = "overlay2 " + ((this.checked)? "pointer" : "");
    34     }
    35 }
    36 </script>
    37 </head>
    38 <body>
    39     <div id="a" class="overlay1"></div>
    40     <div id="b" class="overlay2"></div>
    41     <a href="http://mail.sina.com.cn">SinaMail</a>
    42     <br/><br/>
    43     <span onclick="alert(3);">SinaMail</span>
    44     <p>
    45         <input id="chx" type="checkbox">
    46         <label for="chx">开启穿透点击</label>
    47     </p>
    48 </body>
    49 </html>

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

  • 相关阅读:
    第二十七节(多线程、线程的创建和启动、生命周期、调度、控制、同步)
    第二十六节(对象流,File类)
    第二十五节(转换流,打印流)
    第二十四节(Java文件流,缓冲流)
    第二十三节(String,StringBuffer,基础类型对应的 8 个包装类,日期相关类、 Random 数字 ,Enum枚举)下
    【转】perl如何避免脚本在windows中闪一下就关闭
    计算机基础(二)
    计算机基础(一)
    04 数据结构
    03 逻辑与结构
  • 原文地址:https://www.cnblogs.com/axl234/p/3769754.html
Copyright © 2011-2022 走看看