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


    绝对定位元素盖住链接或添加某事件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 {
            80px;
            height:20px;
            background:gold;
            position:absolute;
            top:5px;
            left:5px;
            opacity:0.5;
        }
        .overlay2 {
            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则可以触发相应的行为。

  • 相关阅读:
    深入Log4J源码之Log4J Core
    ScheduledThreadPoolExecutor与System#nanoTime
    []JSR 133 (Java Memory Model) FAQ
    happens-before俗解
    ScheduledThreadPoolExecutor实现原理
    Java Timer&TimerTask原理分析
    Java 编程的动态性,第 1 部分: 类和类装入
    结合反射与 XML 实现 Java 编程的动态性
    Java 日志缓存机制的实现
    Tomcat 系统架构与设计模式,第 2 部分: 设计模式分析
  • 原文地址:https://www.cnblogs.com/ranzige/p/4259969.html
Copyright © 2020-2023  润新知