pointer-events: none 的两个应用场景

简介

pointer-events: none 真是个神奇的属性。

该属性有什么用？借用 CSS3 pointer-events:none 应用举例及扩展 的总结来讲：

pointer-events: none 顾名思义，就是鼠标事件拜拜的意思。元素应用了该 CSS 属性，连接啊，点击啊什么的都变成了 “浮云牌酱油”。pointer-events: none 的做用是让元素实体 “虚化”。例如一个应用 pointer-events: none 的按钮元素，则咱们在页面上看到的这个按钮，只是一个虚幻的影子而已，您能够理解为海市蜃楼，幽灵的躯体。当咱们用手触碰它的时候能够轻易地没有任何感受地从中穿过去。

你们都知道 input[type=text|button|radio|checkbox] 支持 disabled 属性，能够实现事件的彻底禁用。若是其余标签须要相似的禁用效果，能够试试 pointer-events: none

举个简单的例子：

<a href="http://sf.gg" style="pointer-events: none">click me</a>

这个连接，你是点不了的，而且 hover 也没有效果。（值得一提的是，仅仅是鼠标事件失效，用 tab 键仍是能够选中该连接的，而后 enter 打开，这个时候能够去掉 a 标签的 href 属性，就不能让 tab 键选中了）

实践一

今天改了一个 众审中心 的 bug。

好比，挖坟帖审核 若是反对经过的话，须要选中理由，如图：

从代码角度上讲，该元素是支持 click 和 hover 的。

众审中心其实有不少子项目，用的是一个模版，可是 标签清理 不同，它没有勾选理由的功能（理由只是展现），可是由于用的是一套模版代码，因此以前的 bug 就是类似位置也是可点击的，如今要修改成不可点击。

简单看了下，一个 li 标签（其实不论是啥标签啦），直接给它加上 pointer-events: none 完美解决。

若是不这样作，就要从 js 入手，判断响应的模块，去掉 click 事件（标签清理模块特判），而后 CSS 也要修改，hover 效果也要一块儿去掉（标签清理模块须要另外构造样式）。加上我对这里的代码不熟悉，可能完美解决问题须要花必定的时间。

不得不感叹 pointer-events: none 大法好！

实践二

SegmentFault 5 周年 是前同事 @cheri 在 SF 五周年的时候作的网页，弹幕层用了 canvas 构造，canvas 下面的内容实际上是被 canvas 遮住了，没法点击。

这个时候，pointer-events: none 又要闪亮登场啦！还记得前面说的吗，元素应用了 pointer-events: none ，其实就是海市蜃楼啦，任何事件均可以轻易从它身上穿过去！

因此咱们给 canvas 加上 pointer-events: none，真正在下面的内容就能够被点击了。

其实相似的例子不少，参考 CSS3 pointer-events 介绍 举的例子：

好比在某个项目中，不少元素须要定位在一个地图层上面，这里就要用到不少绝对定位或者相对定位的元素，可是这样的话，这些浮在上面的 div 或者其它元素通常都会给个宽高，或者 relative 的元素能够不给宽高，这个时候，这些元素就会盖住下面的地图层，以致于地图层没法操做。那么咱们就能够给这个 div 设置 pointer-events: none，而后你就会发现下面的地图就能够拖动和点击了。可是悲剧的是，操做区域自己却没法操做了，直接被无视掉了，不过不用担忧，咱们能够给里面的元素从新设置为 pointer-events:auto，固然，只给须要操做的元素区域设置。