唯品秀前端博客
当前位置: 前端开发 > HTML/CSS > CSS3 pointer-events允许鼠标点击穿透后面的元素

CSS3 pointer-events允许鼠标点击穿透后面的元素

2017-05-05 分类:HTML/CSS 作者:管理员 阅读(4663)

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.

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(7) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
7

谢谢你请我吃鸡腿*^_^*

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

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

博客简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与,主题源码 

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

站点统计

  • 文章总数: 238 篇
  • 草稿数目: 0 篇
  • 分类数目: 15 个
  • 独立页面: 6 个
  • 评论总数: 862 条
  • 链接总数: 14 个
  • 标签总数: 429 个
  • 建站时间: 1041 天
  • 注册用户: 2885 人
  • 访问总量: 8668468 次
  • 最近更新: 2019年10月21日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线