pointer-events，搞前端的朋友们应该听说过这个属性吧。每年圣诞节的时候，许多网页上都会挂出一个雪花飘落的特效增加一些节日气氛。有一些是用flash实现的，也有用HTML+js实现的。当时就很好奇为何在页面z轴最上层增加了一个层却完全不会影响下面元素的任何事件响应。简直是前端黑科技。
后来看了大神的解释，原来只用了一个的css属性pointer-events就可以搞定一切了。
看上去确实很神奇，以为会是事件冒泡代理转发之类的很难懂的概念。实际上超级简单，对某一个元素比如div采用div{pointer-events:none}即可让这个HTML元素（包括它的所有子孙元素）失去所有的事件响应。鼠标焦点会直接无视它，click、mouseover等所有事件会穿透它到达它的下一级元素。这个属性看起来似乎很有用，让我一直都想怎样在项目中能有点实际的意义。
直到这两天看到网上一个数据可视化的项目案例，终于找到了一个用武之地。
如图，页面z轴上分两层，底层是基于百度地图和Echarts做的全屏大地图，上层container容器也是全屏的，是用Vue+webSocket做的实时图表table和信息展示文字及header部分，看着简直完美。跑起来测试，地图无法用滚轮缩放移动了，Echart的组件也无法点击交互了。原因也很简单，上层的container层把地图‘挡住了’，这种时候用pointer-events就很有用了，直接pointer-events:none搞定。但是这样一来table因为继承的关系，里面的交互事件也用不了了（本来每行点击可以弹一个dialog展示详情的），这时候可以针对table单独用一个pointer-events:auto事件就又回来了。
这就是我目前遇到了使用这个属性最好的使用场景，那就是用来做一些特效类的交互层级比较多的页面，当然如果你脑洞开得够大，用它动态绑定一些元素，感觉可以玩出一些黑魔法。
如果不知道这个属性的话，暂时我还真没想到其它的方案解决这个难题，欢迎谈谈你的想法啊。不过首先你得先关注我，并转发呢，也可以加我Q群：142991222一起分享，这样我们的友谊才能天长地久。
另外，因为是css3属性，不支持IE直到9！
网友评论