唯品秀前端博客

pointer-events,搞前端的朋友们应该听说过这个属性吧。每年圣诞节的时候,许多网页上都会挂出一个雪花飘落的特效增加一些节日气氛。有一些是用flash实现的,也有用HTML+js实现的。当时就很好奇为何在页面z轴最上层增加了一个层却完全不会影响下面元素的任何事件响应。简直是前端黑科技。

看上去确实很神奇,以为会是事件冒泡代理转发之类的很难懂的概念。实际上超级简单,对某一个元素比如div采用div{pointer-events:none}即可让这个HTML元素(包括它的所有子孙元素)失去所有的事件响应。鼠标焦点会直接无视它,click、mouseover等所有事件会穿透它到达它的下一级元素。这个属性看起来似乎很有用

张鑫旭将pointer-events:none理解为“幻影特性”。原话如下:

pointer-events:none的作用是让元素实体“虚化”。例如一个应用pointer-events:none的按钮元素,则我们在页面上看到的这个按钮,只是一个虚幻的影子而已,您可以理解为海市蜃楼,幽灵的躯体。当我们用手触碰它的时候可以轻易地没有任何感觉地从中穿过去。
一切都是幻影!

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>pointer-events_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="唯品秀博客"/>
<style>
ul li:nth-of-type(2){
    pointer-events: none;
}
</style>
</head>
<body>
<ul>
    <li><a href="https://developer.mozilla.org/">MDN</a></li>
    <li><a href="http://example.com">一个不能点击的链接</a></li>
</ul>
</body>
</html>

实际我们并不会去上述这样做,因为似乎并没什么意义,如我博客雪花效果,具体代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style>
    @keyframes snow{
        0% {
            background-position: 0 0, 0 0;
        }
        100% {
            background-position: 500px 500px, 1000px 500px;
        }
    }
    #snowMask {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: url('<?php bloginfo('template_url'); ?>/images/snow1.png'),url('<?php bloginfo('template_url'); ?>/images/snow2.png');
        animation: 10s snow linear infinite;
        pointer-events: none;
        z-index: 9999
    }
</style>
<body>
    <div id="snowMask">覆盖主体内容的背景雪花,让它虚化,透过它不影响页面主体内容点击,和主体内容同级去存在覆盖遮罩</div>
    <div id="conten">主题内容区域</div>
</body>

这样的你还能想到在什么地方使用吗?如下图你能想到什么?

当我们自定义下拉或者这种带图标的区域性点击,你是否还需要用input和img小图片/iconfont同时去绑定事件?那你是不是还有考虑处理事件冒泡等问题,其实根本不用这么麻烦,只需要给input绑定点击事件,然后将小图片/iconfont通过pointer-events: none虚化即可!

浏览器支持:

可以看canIUse上的数据,目前支持IE11、Firefox3.6+、Chrome、Safari4+、Opera15+、Android、ios.

本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(8) 打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"CSS3 pointer-events允许鼠标点击穿透后面的元素"

表情

最新评论

    暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏