css3-pointer-events

pointer-events:none

pointer-events:none的作用是让元素实体“虚化”。例如一个应用pointer-events:none的按钮元素,则我们在页面上看到的这个按钮,只是一个虚幻的影子而已,您可以理解为海市蜃楼,幽灵的躯体。当我们用手触碰它的时候可以轻易地没有任何感觉地从中穿过去。
一切都是幻影!

作用1,用于提高界面滚动的效率

pointer-events 是一个 CSS 属性,可以有多个不同的值,属性的一部分值仅仅与 SVG 有关联,这里我们只关注 pointer-events: none 的情况,大概的意思就是禁止鼠标行为,应用了该属性后,譬如鼠标点击,hover 等功能都将失效,即是元素不会成为鼠标事件的 target。

可以就近 F12 打开开发者工具面板,给 标签添加上 pointer-events: none 样式,然后在页面上感受下效果,发现所有鼠标事件都被禁止了。

那么它有什么用呢?

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

.disable-hover {
  pointer-events: none;
}

大概的做法就是在页面滚动的时候, 给 添加上 .disable-hover 样式,那么在滚动停止之前, 所有鼠标事件都将被禁止。当滚动结束之后,再移除该属性。

作用2,用于前端动态添加水印

这部分主要是个人项目上的需求,需要在前端报表上面添加水印,原本希望通过定位的方式,每间隔一段高度定位一行文本,但是由于水印需要覆盖在界面上面,导致界面上的echart无法响应鼠标事件,界面被定位文本覆盖,鼠标响应为定位文本时间。

后来通过添加在界面最上层覆盖一层蒙版,蒙版的背景图片设置为水印图片,同时为蒙版添加pointer-events:none;也就是屏蔽蒙版的鼠标事件,这样echart可以正确识别鼠标事件

  .water-container {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('/static/img/customReport/water-mark.svg');
    pointer-events: none;
    background-repeat: repeat-y;
  }.disable-hover {
  pointer-events: none;
}
上一篇:vue框架vant组件中events的使用方法


下一篇:predefined data types in UI5