好sf pointer-events: none SegmentFault 中的两种应用场景

介绍

-：无 多么神奇的属性啊。

这个属性有什么用呢？借用CSS3 -:none 总结的应用示例和扩展：

-：无 顾名思义，就是告别鼠标事件。把这个CSS属性应用到元素上，链接、点击等都变成了“浮云牌酱油”。 -: none 用于“模糊”元素实体。例如，如果一个按钮元素应用了-:none，那么我们在页面上看到的按钮只是一个虚幻的影子。你可以把它理解为海市蜃楼，鬼魂的身体。当我们用手触摸它时，我们可以轻松地穿过它，没有任何感觉。

大家都知道input[type=text||radio|]支持属性，可以完全禁用事件。如果其他标签需要类似的禁用效果，可以尝试 -: none

举个简单的例子：

click me

您无法点击此链接，悬停也没有任何效果。 （值得一提的是，即使鼠标事件无效，仍然可以用tab键选择链接，然后回车打开。此时可以去掉a标签的href属性，这样不能使用 Tab 键来选择它。）

练习一

今天我们修复了公共评论中心的一个错误。

例如，挖坟帖的审核反对通过，则需要选择原因，如图：

从代码角度来看，该元素支持单击和悬停。

公审中心其实有很多子项目，都是使用模板，只是标签清理不一样。它没有检查原因的功能（只显示原因），但由于使用了一套模板代码，所以之前的bug都是类似的。该位置也是可点击的，但现在需要改为不可点击。

简单看了一下，一个li标签（其实不管是什么标签），只要在里面加上-:none，就完美解决了。

如果不这样做，则需要从js入手，确定响应模块好sf，去掉点击事件（标签清理模块专用）。那么CSS也必须修改，悬停效果也必须去掉（标签清理模块需要构造一个单独的样式）。另外，我对这里的代码不太熟悉，所以可能需要一定的时间才能完美解决问题。

不得不感叹——：没有一个大法是伟大的！

练习2

五周年纪念是前同事@cheri为顺丰五周年制作的网页。弹幕层使用了结构，但是下面的内容实际上被覆盖了，无法点击。

这个时候，-:没有人要再次登场了！还记得我之前说过的，应用的元素-:none其实是海市蜃楼，任何事件都可以轻松穿过它！

所以我们添加-:none，下面的实际内容就可以点击了。

事实上，类似的例子还有很多。请参考CSS3-介绍示例：

例如，在项目中，许多元素需要放置在地图图层上。这里使用了许多绝对定位或相对定位的元素。然而，在这种情况下，这些浮动 div 或其他元素通常会有宽度和高度。 ，或者元素不需要指定宽度和高度。在这种情况下，这些元素将覆盖下面的地图图层，使地图图层无法操作。然后我们可以给这个div设置-:none，然后你会发现下面的地图是可以拖动点击的。但悲剧的是操作区域本身无法操作，直接被忽略。不过不用担心，我们可以将里面的元素重置为-:auto。当然，只设置需要操作的元素的区域即可。