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.
上一篇：GitHub互赞、互Star、刷赞平台 – GitStar快速提升项目人气
共 0 条评论关于"CSS3 pointer-events允许鼠标点击穿透后面的元素"
最新评论