CSS3之pointer-events(屏蔽鼠标事件)属性说明

最新推荐文章于 2024-06-30 18:20:39 发布

. . . . .

最新推荐文章于 2024-06-30 18:20:39 发布

阅读量1.3k

点赞数 1

分类专栏：前端开发

本文链接：https://blog.csdn.net/yexudengzhidao/article/details/106792065

版权

前端开发专栏收录该内容

350 篇文章 19 订阅

订阅专栏

我们在 HTML 开发时可能会遇到这样的情况：页面上有一些元素使用绝对定位布局，这些元素可能会遮盖住它们位置下方的某个元素的部分或者全部。默认情况下，下方元素被遮挡的部分是不会响应鼠标事件的。

但有时我们可能需要被遮盖住的元素仍然能够处理鼠标事件。比如：我们在一个地图组件上覆盖了一个显示信息的元素，但又不想让这个信息面板影响下方地图的拖动等操作。那么我们可以使用一个叫 pointer-events 的 css 属性来实现。

一. pointer-events属性

auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。
none——元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。
其它属性值为SVG专用，这里不再多介绍了。

二. 使用场景

1. 让链接不能点击

这里将第二个 a 标签 pointer-events 样式属性设置为 none，那么该链接不仅无法被点击，而且没有鼠标手形样式。（同样的，我们可以使用该样式来避免按钮多次点击、表单重复提交等问题。）
在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <ul>
      <li><a href="http://www.hangge.com">可以点击的链接</a></li>
      <li><a href="http://www.hangge.com" style="pointer-events:none">不能点击的链接</a></li>
    </ul>
  </body>
</html>

2. 让鼠标点击穿透上方的 div

(1) 效果图

下面样例中黄色半透明的 div 使用绝对定位，覆盖在链接的上方。默认情况下，黄色区域下方的链接我们是没法点击到的。这里我们对黄色 div 加上一个 pointer-events 属性后，就可以穿过该层去点击下面的 a 标签了。
在这里插入图片描述

(2) 示例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .top {
          width: 100px;
          height: 90px;
          position: absolute;
          top: 0;
          left: 65px;
          background: yellow;
          opacity: 0.5;
          pointer-events: none;
      }
    </style>
  </head>
  <body>
    <!-- 下方的链接 -->
    <ul>
      <li><a href="http://www.baidu.com">百度</a></li>
        <li><a href="http://www.baidu.com">www.baidu.com</a></li>
    </ul>
    <!-- 上方黄色div -->
    <div class="top"></div>
  </body>
</html>

. . . . .

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3之pointer-events(屏蔽鼠标事件)属性说明

我们在 HTML 开发时可能会遇到这样的情况：页面上有一些元素使用绝对定位布局，这些元素可能会遮盖住它们位置下方的某个元素的部分或者全部。默认情况下，下方元素被遮挡的部分是不会响应鼠标事件的。但有时我们可能需要被遮盖住的元素仍然能够处理鼠标事件。比如：我们在一个地图组件上覆盖了一个显示信息的元素，但又不想让这个信息面板影响下方地图的拖动等操作。那么我们可以使用一个叫 pointer-events 的 css 属性来实现。使用场景1. 让链接不能点击这里将第二个 a 标签 pointer-event
复制链接

扫一扫