CSS中的pointer-events属性实现点穿效果

时间: 2018-08-06阅读: 1260标签: 事件

css的pointer-events属性

auto:与 pointer-events 属性未指定时的表现效果相同。 
none:该元素永远不会成为鼠标事件的 target。但是,当其后代元素的 pointer-events 属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。


代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test css pointer-events</title>
    <style>
        body{
            background: #eeeeee;
        }
        main{
            width: 880px;
            height: 500px;
            margin: 100px auto;
            position: relative;
            background: #FFFFFF;
            display: table;
        }
        .top{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform:translate(-50%,-50%);
            display: table-cell;
            vertical-align: center;
            color: #FFFFFF;
            line-height: 100px;
            background: purple;
            pointer-events: none;
            cursor: pointer;
        }

        .under{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;

            text-align:center;
            line-height: 100px;
            color: #FFFFFF;
            border-radius:50%;
            background: orangered;
            cursor: zoom-in;
        }
    </style>
</head>
<body>
    <main>

        <div class="under">
            Under U
        </div>

        <div class="top">
            I am top div
        </div>

    </main>
</body>
<script type="text/JavaScript">
    let main = document.querySelector("main");
    let log = function (content) {
        let p = document.createElement("p");
        p.innerHTML = content;
        main.appendChild(p);
    };
    let t =document.querySelector(".top");
    t.addEventListener("click",function () {
            log("clicked the top!")
    },true);//捕获阶段
    let under =document.querySelector(".under");
    under.addEventListener("click",function () {
        log("clicked the under!!!")
    },true)//捕获阶段
</script>
</html>


运行结果


在具有层级关系的结构中,使用了pointer-events:none 属性将会使当前元素中的事件不会被捕获,从而实现了点穿的效果。而当代码示例中假如top元素具有子元素且显示指定pointer-events属性不为none的时候,top元素注册的事件将会被捕获/冒泡触发


参考连接:http://www.hangge.com/blog/cache/detail_1859.html  
来源:https://blog.csdn.net/csu_passer/article/details/81431999


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/987

js有哪些常用事件?

网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说,我们可以在用户点击某按钮时产生一个onClick 事件来触发某个函数。事件在HTML页面中定义。

纯CSS实现点击事件展现隐藏div菜单列表/元素切换

在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错;当然还有使用纯JS实现的小代码段。我这里整理了纯CSS实现方式,给需要的人和给自己做个笔记:实现原理利用CSS伪类:target

js事件委托(事件代理)

js中事件冒泡我们知道,子元素身上的事件会冒泡到父元素身上,事件代理就是本来加载子元素身上的事件,加在其父元素身上,其问起产生了,那么多的子元素怎么区分事件本应该是哪个子元素的。 答案就是event对象记录的事件源

JavaScript 事件

客户端 JavaScript 程序采用了异步事件驱动编程模型、事件不是 JavaScript 对象,不会出现在程序源代码中、事件类型是一个用来说明发生什么类型事件的字符串,有时会称之为事件名字

vue的事件冒泡

先说冒泡,我们都知道水中有气泡的时候,气泡会从水底往上升,由深往浅的。但是水在上升的过程中会经历不同的深度的水。那么我们再来解释一下什么是事件冒泡

javascript的事件有哪些?

JavaScript使我们有能力创建动态页面。事件是可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。那么,javascript的事件有哪些?本篇文章将给大家来介绍关于javascript中常用的事件。

Js事件系统

提到事件,相信每位Javascript开发者都不会陌生,由于Javascript是先有实现,后有规范,因此,对于大部分人来说,事件模块可以说是比较模糊的,本文将从不同角度帮助你理清楚事件模块。

js鼠标事件参数,获取鼠标在网页中的坐标

事件对象 event,JavaScript 将事件event作为参数传递,IE中把 event 事件对象作为全局对象 window 的一个属性,获取鼠标在网页中的坐标 = 鼠标在视窗中的坐标 + 浏览器滚动条坐标

微信小程序中事件

Touchcancle: 在某些特定场景下才会触发(比如来电打断等);​ tap事件和longpress事件通常只会触发其中一个;事件传递参数当视图层发生事件时,某些情况需要事件携带一些参数到执行的函数中, 这个时候就可以通过

HTML5触摸事件演化tap事件

触摸事件是移动浏览器特有的HTML5事件,虽然click事件在pc和移动端更通用,但是在移动端会出现300ms延迟,较为影响用户体验,300ms延迟来自判断双击和长按,因为只有默认等待时间结束以确定没有后续动作发生时,才会触发click事件

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!