摘要：值得一提的是，仅仅是鼠标事件失效，用键还是可以选中该链接的，然后打开，这个时候可以去掉标签的属性，就不能让键选中了实践一今天改了一个众审中心的。
简介
pointer-events: none 真是个神奇的属性。
该属性有什么用？借用 CSS3 pointer-events:none 应用举例及扩展 的总结来说：test
pointer-events: none 顾名思义，就是鼠标事件拜拜的意思。元素应用了该 CSS 属性，链接啊，点击啊什么的都变成了 “浮云牌酱油”。pointer-events: none 的作用是让元素实体 “虚化”。例如一个应用 pointer-events: none 的按钮元素，则我们在页面上看到的这个按钮，只是一个虚幻的影子而已，您可以理解为海市蜃楼，幽灵的躯体。当我们用手触碰它的时候可以轻易地没有任何感觉地从中穿过去。
大家都知道 input[type=text|button|radio|checkbox] 支持 disabled 属性，可以实现事件的完全禁用。如果其他标签需要类似的禁用效果，可以试试 pointer-events: none
举个简单的例子：
click me
这个链接，你是点不了的，并且 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，当然，只给需要操作的元素区域设置。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113352.html
摘要：属性效果和没有定义属性相同，鼠标不会穿透当前层。在中，该值和的效果相同。元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。其它属性值为专用，这里不再多介绍了。 pointer-events属性 auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。 none——元素不再是鼠标事...
摘要：上介绍为属性指定在什么情况下如果有某个特定的图形元素可以成为鼠标事件的。属性值有其中默认属性为。当值为表示鼠标事件穿透该元素并且指定该元素下面的任何东西。网友叙帝利给出了一种使用场景。加上则不会响应事件了。 MDN 上介绍为 CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。pointer-events 属性值有: /* Keyword va...
摘要：上介绍为属性指定在什么情况下如果有某个特定的图形元素可以成为鼠标事件的。属性值有其中默认属性为。当值为表示鼠标事件穿透该元素并且指定该元素下面的任何东西。网友叙帝利给出了一种使用场景。加上则不会响应事件了。 MDN 上介绍为 CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。pointer-events 属性值有: /* Keyword va...
摘要：此处就不一一赘述。我说的方法只需要给表单加上一个类，就可以让表单只读。方法用给做个看不见的蒙版，遮住下面所有的元素，使之不响应任何事件方法用让所有事件穿透关于属性，可以看看这个介绍 一般的方法往往给表单的各个input、select等加上readonly，但是这个方法有很多缺点。此处就不一一赘述。 我说的方法只需要给表单加上一个类，就可以让表单只读。 方法1: 用:before给fo...
摘要：此处就不一一赘述。我说的方法只需要给表单加上一个类，就可以让表单只读。方法用给做个看不见的蒙版，遮住下面所有的元素，使之不响应任何事件方法用让所有事件穿透关于属性，可以看看这个介绍 一般的方法往往给表单的各个input、select等加上readonly，但是这个方法有很多缺点。此处就不一一赘述。 我说的方法只需要给表单加上一个类，就可以让表单只读。 方法1: 用:before给fo...
阅读 1888·2023-04-25 15:45
阅读 1156·2021-09-29 09:34
阅读 2469·2021-09-03 10:30
阅读 1953·2019-08-30 15:56
阅读 1405·2019-08-29 15:31
阅读 1225·2019-08-29 15:29
阅读 3153·2019-08-29 11:24
阅读 3010·2019-08-26 13:45
