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

更新日期: 2018-08-06阅读量: 1581标签: 事件

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

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

javascript的事件流模型都有什么?

事件流:当你在页面触发一个点击事件后,页面上不仅仅有一个元素响应该事件而是多个元素响应同一个事件,因为元素是在容器中的。事件发生的顺序就是事件流,不同的浏览器对事件流的处理不同。

几种HTML标签伪元素绑定事件的方式

图标却是 ::after 伪元素实现的,在印象中好像不能直接对伪元素进行 dom 操作,可项目中有所有页面都是通过伪元素来展示图标的,将所有页面中图标改成 DOM 元素也不太可行。

浏览器事件之事件流

事件流描述的是从页面中接收事件的顺序。但是IE和Netscape却提出了两个完全相反的事件流,分别是事件冒泡流和事件捕获流。E的事件流称为事件冒泡,从最具体的元素开始,然后逐渐向上传播到文档节点。

原生JS实时监听input框输入值

利用原生JS实时监听input框输入值,原生JS中可以使用oninput,onpropertychange,onchange,oninput,onpropertychange,onchange的用法

jQuery on()方法使用

本文实例讲述了jQuery中on()方法用法。分享给大家供大家参考。具体分析如下:此方法可以在匹配元素上绑定一个或者多个事件处理函数。使用off()方法可以删除on()方法绑定的事件。

NodeJS事件

触发器Emitter会触发命名事件eventName来调用函数Listener,移除指定事件的指定监听器:emitter.removeListener(eName, listener)、emitter.off(eName,listener) 设置监听器最大绑定值:emitter.setMaxListeners(n)

React 中阻止事件冒泡的问题

在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行。DOM 事件会先后经历 捕获 与 冒泡 两个阶段。捕获即事件沿着 DOM 树由上往下传递,到达触发事件的元素后,开始由下往上冒泡。

关于DOM事件流、DOM0级事件与DOM2级事件

DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window;流的概念,在现今的 JavaScript 中随处可见。比如说 React 中的单向数据流,Node 中的流

Js阻止事件冒泡与阻止默认事件:理解stopPropagation(),preventDefault(),return false的区别

这篇文章主要讲解Js中阻止事件冒泡,阻止默认事件的方法,理解stopPropagation(),preventDefault(),return false的区别。event.stopPropagation() 方法阻止事件冒泡到父元素,阻止任何父事件处理程序被执行。

JavaScript自定义事件

系统内发生的动作或发生的事情,系统会在事件出现时触发某种信号,提供一个自动加载某种动作的机制。事件三要素:事件源(触发事件的元素也就是你是要对什么东西进行操作);事件(事件的触发方式也就是你要做什么实现所要的交互效果)

点击更多...

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