唯品秀博客
  • 温馨提示:唯品秀个人博客2016/11/16正式上线了!
  • 博客不定时更新、修复bug,若无法正常访问浏览,请稍后再试
  • 欢迎各位前端伙伴注册登录会员,共同分享前端技巧
  • 2018/04/24日最近更新:优化主导航高亮显示配置
首页 > 前端开发 > HTML5/CSS3 > CSS3 pointer-events允许鼠标点击穿透后面的元素

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

2017年05月05日 作者: 管理员 1639次浏览 条评论

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.

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

赞( 6 ) 打赏

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

支付宝
微信
6

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

支付宝
微信
标签:

上一篇:

下一篇:

前端简介

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

风云英雄

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,却获得了斯坦福、哈佛等许多常青藤名校课程的结业证……他们的同学不局限在一国一校,而是遍及全球……加入他们,成为一名互联网学习者!

站点统计

  • 文章: 128 篇
  • 分类: 13 个
  • 标签: 218 个
  • 运行: 554天
  • 访问:6,587,558次
  • 更新: 2018年6月22日
服务热线:
 182XXXX8470

 QQ在线交流

点击这里给我发消息
点击这里给我发消息

 旺旺客服