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，当然，只给需要操作的元素区域设置。

pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill;    /* SVG only */
pointer-events: visibleStroke;  /* SVG only */
pointer-events: visible;        /* SVG only */
pointer-events: painted;        /* SVG only */
pointer-events: fill;           /* SVG only */
pointer-events: stroke;         /* SVG only */
pointer-events: all;            /* SVG only */

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;
当此属性未指定时，visiblePainted值的相同特征适用于 SVG（可缩放矢量图形） 内容。

除了指示该元素不是鼠标事件的目标之外，值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。

初始值    auto
适用元素    all elements
是否是继承属性    yes
适用媒体    visual
计算值    as specified
Animation type    discrete
正规顺序    the unique non-ambiguous order defined by the formal grammar
语法
pointer-events属性被指定为从下面的值列表中选择的一个关键字。

值
auto
与pointer-events属性未指定时的表现效果相同，对于SVG内容，该值与visiblePainted效果相同
none
元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
visiblePainted
只适用于SVG。元素只有在以下情况才会成为鼠标事件的目标：
visibility属性值为visible，且鼠标指针在元素内部，且fill属性指定了none之外的值
visibility属性值为visible，鼠标指针在元素边界上，且stroke属性指定了none之外的值
visibleFill
只适用于SVG。只有在元素visibility属性值为visible，且鼠标指针在元素内部时,元素才会成为鼠标事件的目标，fill属性的值不影响事件处理。
visibleStroke
只适用于SVG。只有在元素visibility属性值为visible，且鼠标指针在元素边界时,元素才会成为鼠标事件的目标，stroke属性的值不影响事件处理。
visible
只适用于SVG。只有在元素visibility属性值为visible，且鼠标指针在元素内部或边界时,元素才会成为鼠标事件的目标，fill和stroke属性的值不影响事件处理。
painted
只适用于SVG。元素只有在以下情况才会成为鼠标事件的目标：
鼠标指针在元素内部，且fill属性指定了none之外的值
鼠标指针在元素边界上，且stroke属性指定了none之外的值
visibility属性的值不影响事件处理。
fill
只适用于SVG。只有鼠标指针在元素内部时,元素才会成为鼠标事件的目标，fill和visibility属性的值不影响事件处理。
stroke
只适用于SVG。只有鼠标指针在元素边界上时,元素才会成为鼠标事件的目标，stroke和visibility属性的值不影响事件处理。
all
只适用于SVG。只有鼠标指针在元素内部或边界时,元素才会成为鼠标事件的目标，fill、stroke和visibility属性的值不影响事件处理。
示例
示例 1
/* Example 1: Makes all the img non-reactive to any mouse events such as dragging, hovering, clicking etc */
img {
  pointer-events: none;
}
示例 2
点击链接 http://example.com 时，不会跳转

<ul>
<li><a href="https://developer.mozilla.org/">MDN</a></li>
<li><a href="http://example.com">example.com</a></li>
</ul>
a[href="http://example.com"] {
  pointer-events: none;
}

提示
使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永远不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。当然，位于父元素但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（鼠标活动将会穿过父元素而指向位于其下面的元素）。

我们希望为HTML提供更为精细的控制（而不仅仅是auto和none），以控制元素哪一部分何时会捕获鼠标事件。如果你有独特的想法，请添加至wiki页面的Use Cases部分，以帮助我们如何针对HTML扩展pointer-events。

该属性也可用来提高滚动时的帧频。的确，当滚动时，鼠标悬停在某些元素上，则触发其上的hover效果，然而这些影响通常不被用户注意，并多半导致滚动出现问题。对body元素应用pointer-events：none，禁用了包括hover在内的鼠标事件，从而提高滚动性能。

 

可能是史上最详细的 underscore 源码剖析：https://github.com/hanzichi/underscore-analysis
程序员都应该学点算法：https://github.com/hanzichi/leetcode
了解博主韩子迟：http://www.cnblogs.com/zichi/p/about.html
GitHub：https://github.com/hanzichi Follow 楼主给楼主更多写作的动力~

来源： https://www.cnblogs.com/zichi/p/9068481.html

https://blog.youkuaiyun.com/qq_42606051/article/details/81808133

https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events

http://yyk.familydoctor.com.cn/content_21206_979045.html

http://yyk.familydoctor.com.cn/content_21206_979081.html

http://yyk.familydoctor.com.cn/content_21206_979092.html

http://yyk.familydoctor.com.cn/content_21206_979010.html