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;
}