简介pointer-events:none真是一个神奇的属性。这个属性有什么用？借用CSS3pointer-events:none应用实例和扩展的总结：testpointer-events:none，顾名思义，就是告别鼠标事件。给元素应用CSS属性，链接、点击等都变成了“福运牌酱油”。pointer-events:none的作用是让元素实体“模糊”。比如一个button元素，应用了pointer-events:none，我们在页面上看到的button只是一个虚幻的影子，你可以理解为海市蜃楼，鬼身。当我们用手触摸它时，我们可以毫无感觉地轻松穿过它。大家都知道input[type=text|button|radio|checkbox]支持disabled属性，可以完全禁用事件。如果其他标签需要类似的禁用效果，你可以试试pointer-events:none一个简单的例子：clickme你不能点击这个链接，悬停也没有效果。（值得一提的是只有鼠标事件无效，仍然可以用tab键选中链接，然后回车打开。此时可以去掉a标签的href属性，tabkey不能选择。）练习1今天改了审核中心的一个bug。比如挖坟帖审核反对，需要选择原因，如图：从代码来看，该元素支持点击和悬停。公审中心其实有很多子项目，都是用一个模板，只是标签清洗不一样。没有查看原因的功能（只显示原因），但是因为使用了一套模板代码，所以之前的bug在类似的位置也是可以点击的，现在需要修改为非-可点击。简单看了下，一个li标签（其实不管是什么标签），直接在里面加上pointer-events:none就是一个完美的解决方案。如果不这样做，需要从js入手，判断对应的模块，去掉点击事件（标签清理模块的特殊判断），然后修改CSS，一起去掉hover效果（标签清理模块需要单独构造样式）。另外，我对这里的代码不熟悉，可能需要一些时间才能完美解决问题。不得不感叹：大法好！Practice2SegmentFault5thAnniversary是前同事@cheri在顺丰5周年之际做的一个网页。弹幕层采用canvas结构。画布下方的内容实际上被画布覆盖，无法点击。这时候pointer-events:none又会登场了！还记得我前面说的，元素上加了pointer-events:none，其实是海市蜃楼，任何事件都可以轻松穿越！所以我们在canvas中添加pointer-events:none，下面的内容才可以被点击。其实类似的例子还有很多，参考css3pointer-events介绍中给出的例子：比如某项目中，有很多元素需要定位在一个map图层上，所以很多元素都是绝对定位或者相对定位的这里使用了定位，但是在这种情况下，这些浮动的div或者其他元素一般都有宽高，或者相对元素可能没有宽高。这时候这些元素就会覆盖在下面的地图图层上，使地图图层无法操作。然后我们可以给这个div设置pointer-events:none，然后你会发现下面的地图是可以拖动点击的。但是悲剧的是操作区域本身是不能操作的，直接忽略，不过不用担心，我们可以把里面的元素重新设置为pointer-events:auto，当然只为需要的元素设置区域进行操作。
