css3-pointer-events

最新推荐文章于 2024-08-24 03:29:52 发布

、昔年

最新推荐文章于 2024-08-24 03:29:52 发布

阅读量554

点赞数 1

文章标签： css3 html pointer-events 鼠标事件

本文链接：https://blog.csdn.net/weixin_43760969/article/details/120740595

版权

pointer-events:none属性可以禁止元素的鼠标交互，从而提高滚动时的帧率，避免hover等效果影响用户体验。此外，它在前端水印实现中也有重要作用，通过设置pointer-events:none，可以使覆盖在页面上方的水印不影响底层元素的鼠标事件。在滚动优化中，动态添加.disable-hover类来禁用鼠标事件，而在水印实现中，将水印作为背景并应用此属性，确保交互正常。

摘要由CSDN通过智能技术生成

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