zoukankan      html  css  js  c++  java
  • 【转载】神奇的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则可以触发相应的行为。

  • 相关阅读:
    各大云服务器的对比
    程式上传的功能修改
    如何免费拥有一个聊天机器人
    自学网站大全(值得收藏)
    三菱PLC串口通信的IO控制
    免费下载知网、万方等数据库文档教程
    QT--Android之全配置教程
    QT--Android之Android环境配置
    QT--Android之Java环境配置
    安装纯净的Windows或者Ubuntu系统教程
  • 原文地址:https://www.cnblogs.com/ranzige/p/4259969.html
Copyright © 2011-2022 走看看