css中pointer-events:none属性对div里面元素的鼠标事件的影响

原创 已于 2024-11-05 18:44:38 修改 · 794 阅读 · 9 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#css #javascript #前端
于 2024-11-05 01:16:51 首次发布

文章目录

前倾提要

在gis三维开发的地图组件上放一个背景图片，左右两侧的颜色渐变等，或者gis三维地图上放一张设计过的图片作为地球覆盖在上面的背景时就很有用，即使整个div覆盖在地球上，也不影响操作三维地球。当然也可以通过定位的方式，在地球组件上的两侧创建两个div，然后设置背景颜色，左右两侧的div占一部分宽度。中间啥都没有，也不影响地球操作。但是左右两侧对应宽度的范围也会影响点击操作。

当没有设置属性pointer-events时候

有如下代码，如果我有两个div，其中第一个div有一个按钮，第二个div通过子绝父相的形式定位，覆盖在第一个div上面。这时就会有一个问题，覆盖在上面的div的鼠标事件就会影响第一个div的事件，也就是说，第一个div的按钮点不到，因为覆盖在上面了，上面的div挡住了点击第一个div的按钮。具体代码和结果如下所示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>pointer-events: none;</title>
  <style>
    .parent {
      width: 800px;
      height: 600px;
      background-color: rgba(44, 245, 228, 0.829);
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .child {
      width: 800px;
      height: 600px;
      background-color: rgba(214, 57, 201, 0.699);
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <div class="parent">
    <button id="buttonClick">父元素按钮点击事件</button>
    <div class="child">子元素</div>
  </div>
  <script>

    function handleClick() {
      alert('点击了父元素里面的按钮！！！');
    }

    document.querySelector('#buttonClick').addEventListener('click', handleClick);

    // document.querySelector('.parent').addEventListener('click', handleClick);

    document.querySelector('.parent').addEventListener('click', function() {
      alert('点击父元素');
    });

    document.querySelector('.child').addEventListener('click', function() {
      alert('点击了子元素');
    });
  </script>
</body>
</html>

结果

结果如下所示：

在这里插入图片描述
在这里插入图片描述

可以发现我们无法点击到父元素中的按钮。那如果我需要覆盖的子div的颜色作为父元素的背景，然后又不影响父元素的点击按钮，那么我们该如何设置呢？具体往下看就知道了。这里有一个应用场景，在gis三维开发的地图组件上放一个背景图片，左右两侧的颜色渐变等，或者gis三维地图上放一张设计过的图片作为地球覆盖在上面的背景时就很有用，即使整个div覆盖在地球上，也不影响操作三维地球。当然也可以通过定位的方式，在地球组件上的两侧创建两个div，然后设置背景颜色，左右两侧的div占一部分宽度。中间啥都没有，也不影响地球操作。但是左右两侧对应宽度的范围也会影响点击操作。具体修改如下所示

当子元素设置了pointer-events: none

修改后的代码

在子组件添加对应的css属性pointer-events: none;，具体如下所示。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>pointer-events: none;</title>
  <style>
    .parent {
      width: 800px;
      height: 600px;
      background-color: rgba(44, 245, 228, 0.829);
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .child {
      width: 800px;
      height: 600px;
      background-color: rgba(214, 57, 201, 0.699);
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none;
    }
  </style>
</head>
<body>
  <div class="parent">
    <button id="buttonClick">父元素按钮点击事件</button>
    <div class="child">子元素</div>
  </div>
  <script>

    function handleClick() {
      alert('点击了父元素里面的按钮！！！');
    }

    document.querySelector('#buttonClick').addEventListener('click', handleClick);

    // document.querySelector('.parent').addEventListener('click', handleClick);

    document.querySelector('.parent').addEventListener('click', function() {
      alert('点击父元素');
    });

    document.querySelector('.child').addEventListener('click', function() {
      alert('点击了子元素');
    });
  </script>
</body>
</html>

结果如下所示

在这里插入图片描述
在这里插入图片描述
从结果可以看出，子元素的点击事件失效了。这是又有一个问题了，设置了pointer-events: none;之后，子元素中的按钮事件会不会受到影响呢？具体代码和结果如下所示：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>pointer-events: none;</title>
  <style>
    .parent {
      width: 800px;
      height: 600px;
      background-color: rgba(44, 245, 228, 0.829);
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .child {
      width: 800px;
      height: 600px;
      background-color: rgba(214, 57, 201, 0.699);
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none;
    }
  </style>
</head>

<body>
  <div class="parent">
    <button id="buttonClick">父元素按钮点击事件</button>
    <div class="child">
      <div>子元素</div>
      <div>
        <button id="childButtonClick">子元素按钮点击事件</button>
      </div>
    </div>
  </div>
  <script>

    function handleClick() {
      alert('点击了父元素里面的按钮！！！');
    }

    document.querySelector('#buttonClick').addEventListener('click', handleClick);

    // document.querySelector('.parent').addEventListener('click', handleClick);

    document.querySelector('.parent').addEventListener('click', function () {
      alert('点击父元素');
    });

    document.querySelector('.child').addEventListener('click', function () {
      alert('点击了子元素');
    });

    document.querySelector('#childButtonClick').addEventListener('click', function () {
      alert('点击了子元素里面的按钮，子元素按钮点击事件');
    });

  </script>
</body>

</html>

在这里插入图片描述
在这里插入图片描述
从上图可以发现，设置了pointer-events: none;之后，子元素里面的元素点击也失效了。要想让子元素的按钮单击事件生效，我们可以在子元素对应的按钮的div或者按钮上设置pointer-events: auto;即可，具体代码如下所示：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>pointer-events: none;</title>
  <style>
    .parent {
      width: 800px;
      height: 600px;
      background-color: rgba(44, 245, 228, 0.829);
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .child {
      width: 800px;
      height: 600px;
      background-color: rgba(214, 57, 201, 0.699);
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none;
    }

    .child-button {
      pointer-events: auto;
    }

  </style>
</head>

<body>
  <div class="parent">
    <button id="buttonClick">父元素按钮点击事件</button>
    <div class="child">
      <div>子元素</div>
      <div class="child-button">
        <button id="childButtonClick">子元素按钮点击事件</button>
      </div>
    </div>
  </div>
  <script>

    function handleClick() {
      alert('点击了父元素里面的按钮！！！');
    }

    document.querySelector('#buttonClick').addEventListener('click', handleClick);

    // document.querySelector('.parent').addEventListener('click', handleClick);

    // document.querySelector('.parent').addEventListener('click', function () {
    //   alert('点击父元素');
    // });

    // document.querySelector('.child').addEventListener('click', function () {
    //   alert('点击了子元素');
    // });

    document.querySelector('#childButtonClick').addEventListener('click', function () {
      alert('点击了子元素里面的按钮，子元素按钮点击事件');
    });

  </script>
</body>

</html>

结果如下所示
在这里插入图片描述
在这里插入图片描述
也就是说，这里子元素和父元素点击都生效了。

当父元素设置了pointer-events: none

在父元素没有设置了pointer-events: none; 的时候。

代码如下所示

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>pointer-events: none;</title>
  <style>
    .parent {
      width: 800px;
      height: 600px;
      background-color: rgba(44, 245, 228, 0.829);
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }

  </style>
</head>

<body>
  <div class="parent">
    <button id="buttonClick">父元素按钮点击事件</button>
    </div>
  </div>
  <script>

    document.querySelector('#buttonClick').addEventListener('click', function() {
      alert('点击了父元素里面的按钮！！！');
    });

  </script>
</body>

</html>

结果如下所示

在这里插入图片描述
可以发现里面的元素是能够正常点击的。当设置了pointer-events: none; 的时候。
代码如下所示：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>pointer-events: none;</title>
  <style>
    .parent {
      width: 800px;
      height: 600px;
      background-color: rgba(44, 245, 228, 0.829);
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      pointer-events: none;
    }

  </style>
</head>

<body>
  <div class="parent">
    <button id="buttonClick">父元素按钮点击事件</button>
    </div>
  </div>
  <script>

    document.querySelector('#buttonClick').addEventListener('click', function() {
      alert('点击了父元素里面的按钮！！！');
    });

  </script>
</body>

</html>

结果如下所示：
在这里插入图片描述
当按钮设置了pointer-events: auto;之后。代码如下所示。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>pointer-events: none;</title>
  <style>
    .parent {
      width: 800px;
      height: 600px;
      background-color: rgba(44, 245, 228, 0.829);
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      pointer-events: none;
    }

    .child {
      pointer-events: auto;
    }

  </style>
</head>

<body>
  <div class="parent">
    <button class="child" id="buttonClick">父元素按钮点击事件</button>
    </div>
  </div>
  <script>

    document.querySelector('#buttonClick').addEventListener('click', function() {
      alert('点击了父元素里面的按钮！！！');
    });

  </script>
</body>

</html>

结果
在这里插入图片描述
如果子元素不是内嵌到父div中时，而是以定位的方式定位到父元素上方时。
代码如下所示

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>pointer-events: none;</title>
  <style>
    .parent {
      width: 800px;
      height: 600px;
      background-color: rgba(44, 245, 228, 0.829);
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      pointer-events: none;
    }

    .child {
      pointer-events: auto;
    }

    .position-absolute {
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>

<body>
  <div class="parent">
    <button class="child" id="buttonClick">父元素按钮点击事件</button>
    <div class="position-absolute">
      <button id="divButton">这是定位的div按钮点击事件</button>
    </div>
  </div>
  </div>
  <script>

    document.querySelector('#buttonClick').addEventListener('click', function () {
      alert('点击了父元素里面的按钮！！！');
    });

    document.querySelector('#divButton').addEventListener('click', function () {
      alert('这是定位-定位-定位-的按钮点击事件');
    });


  </script>
</body>

</html>

结果如下所示

在这里插入图片描述
在这里插入图片描述

当定位的div里面的按钮设置了pointer-events: auto;之后。代码如下所示。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>pointer-events: none;</title>
  <style>
    .parent {
      width: 800px;
      height: 600px;
      background-color: rgba(44, 245, 228, 0.829);
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      pointer-events: none;
    }

    .child {
      pointer-events: auto;
    }

    .position-absolute {
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: auto;
    }
  </style>
</head>

<body>
  <div class="parent">
    <button class="child" id="buttonClick">父元素按钮点击事件</button>
    <div class="position-absolute">
      <button id="divButton">这是定位的div按钮点击事件</button>
    </div>
  </div>
  </div>
  <script>

    document.querySelector('#buttonClick').addEventListener('click', function () {
      alert('点击了父元素里面的按钮！！！');
    });

    document.querySelector('#divButton').addEventListener('click', function () {
      alert('这是定位-定位-定位-的按钮点击事件');
    });


  </script>
</body>

</html>

结果如下所示
在这里插入图片描述
在这里插入图片描述

若两个div同级也就是兄弟级

若两个div同级也就是兄弟级，一个设置了pointer-events: none，并不影响另外一个div的点击事件，另一个div可以是定位的也可以是非定位的。都不影响div的点击事件，因为是兄弟级别的。所以不影响，具体看下面代码的child1、child2、child3是兄弟级别的，其中child1设置了pointer-events: none，child2、child3什么都没有设置。具体代码如下所示：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>pointer-events: none;</title>
  <style>
    .parent {
      width: 800px;
      height: 600px;
      background-color: rgba(44, 245, 228, 0.829);
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .child1 {
      pointer-events: none;
    }

    .child2 {
      position: absolute;
      top: 0;
      left: 0;
    }
    .child3 {
      margin-left: 24px;
    }
  </style>
</head>

<body>
  <div class="parent">
    <button class="child1" id="buttonClick">child1-child1-按钮点击事件</button>
    <div class="child2">
      <button id="divButton">child2-child2-按钮点击事件</button>
    </div>
    <div class="child3">
      <button id="divButton3">child3-child-3-按钮点击事件</button>
    </div>
  </div>
  </div>
  <script>

    document.querySelector('#buttonClick').addEventListener('click', function () {
      alert('点击了父元素里面的按钮！！！');
    });

    document.querySelector('#divButton').addEventListener('click', function () {
      alert('这是child2-child2-child2-的按钮点击事件');
    });

    document.querySelector('#divButton3').addEventListener('click', function () {
      alert('这是child3-child3-child3-的按钮点击事件');
    });


  </script>
</body>

</html>

结果如下所示：
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

m0_62317155
关注
HTML/CSS 遮罩层登录框
木木木森林
12-29 553
HTML/CSS 遮罩层登录框 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .
el-select 结合 el-checkBox 实现下拉全选+多选功能
keke11211的博客
11-23 2826
实现效果如图所示： 具体代码如下： <!-- * @Description: el-select 结合 el-checkBox 实现下拉全选+多选功能 --> <template> <div style="padding: 300px 100px;"> <el-select v-model="menus" multiple collapse-tags @change="changeSelectMenu" placeholder="
深入理解 CSS 属性 pointer-events: none
kaisersama__的博客
11-15 3367
pointer-events 属性控制一个元素是否能够接收用户的指针事件。指针事件通常指鼠标点击、悬停、拖动，或者触摸事件等。这些事件可以用来触发元素的交互，例如按钮点击、链接跳转、元素拖动等。pointer-events的常见值auto：元素可以正常接收鼠标事件（默认值）。none：元素不会响应任何鼠标事件或触摸事件，所有指针事件都会被忽略。等：这些值更多是 SVG 场景中的特定用法。：这些值适用于 SVG 元素，用来控制元素的填充区域和描边区域是否响应指针事件。
认识 CSS pointer-events 属性
热门推荐
老司机的后备箱
02-13 1万+
条目状态初始值auto可用值适用所有元素：auto/none，只适用于 SVG：bounding-box/visiblePainted/visibleFill/visibleStroke/visible/painted/fill/stroke/all可继承是的动画类型离散动画（关键帧之间不会有插帧，不会有过渡动画）我们来结合例子说明。是一个可继承属性，按照 CSS 的层叠与继承规则，子元素未设置时将会继承父值。如下例，self 元素设置，child 元素继承到也为none。
CSS pointer-events: none 去掉鼠标事件
快乐de馒头
01-21 1万+
pointer-events: none顾名思义，就是鼠标事件拜拜的意思。元素应用了该 CSS 属性，链接啊，点击啊什么的都变成了 “浮云牌酱油”。pointer-events: none的作用是让元素实体 “虚化”。例如一个应用 pointer-events: none 的按钮元素，则我们在页面上看到的这个按钮，只是一个虚幻的影子而已，您可以理解为海市蜃楼，幽灵的躯体。当我们用手触碰它的时候...
深入理解 CSS pointer-events: none：穿透点击的魔法
前端互助会
02-24 1752
是处理复杂交互层的利器，合理使用可实现：✅ 非阻塞式覆盖层✅ 自定义光标/装饰元素✅ 性能优化但需注意避免滥用，确保关键功能仍可通过其他方式访问（如键盘导航）！
如何透过上层div点击下层的元素
weixin_46517138的博客
02-10 596
如何透过上层div点击下层的元素
css3 穿透属性 pointer-events
叶新东老师的博客
07-28 1126
pointer-events 是一个蛮有趣的 CSS3 屬性，雖然主要是針對 SVG ，但其中幾個屬性應用在 div 上也是頗有意思。顧名思義，這是一個針對滑鼠事件的屬性，默认值为：auto，若值為 none，則可以穿透该元素，点击到下方的元素。除了 auto 與 none，其他都是控制 SVG 的屬性，若採用預設值，則 SVG 就是以 visiblePainted 來表現举例，如下代码：</</.yboxbackgroundrgba;margin;z-index;.gbox。
CSS3之pointer-events(屏蔽鼠标事件)属性说明
EmotionComputer
06-16 1540
我们在 HTML 开发时可能会遇到这样的情况：页面上有一些元素使用绝对定位布局，这些元素可能会遮盖住它们位置下方的某个元素的部分或者全部。默认情况下，下方元素被遮挡的部分是不会响应鼠标事件的。 但有时我们可能需要被遮盖住的元素仍然能够处理鼠标事件。 比如：我们在一个地图组件上覆盖了一个显示信息的元素，但又不想让这个信息面板影响下方地图的拖动等操作。那么我们可以使用一个叫 pointer-events 的 css 属性来实现。 使用场景 1. 让链接不能点击 这里将第二个 a 标签 pointer-event
鼠标穿透 pointer-events: none；
2401_83232643的博客
05-30 3734
是 CSS3 中的一个属性，主要用于控制元素是否响应鼠标或触摸事件。当元素的 pointer-events 属性被设置为 none 时，该元素及其子元素将无法与鼠标或触摸设备产生交互作用，即无法触发事件。可以在一个元素上设置 pointer-events: none，然后在它的子元素上绑定事件，这样鼠标交互会直接在子元素上触发事件，跳过中间元素。在一个元素的子元素上设置 pointer-events: none，可以防止点击事件穿透到父层元素上。在一个元素上覆盖一个透明的层，同时禁用用户对下面元素的操作。
pointer-events: none；——让你的元素“隐身“点击事件
最新发布
菜鸡的博客
08-13 671
* 关键！避免干扰实际点击 *//* 通过JS跟随鼠标移动 */});就像给元素施加了"事件隐身术"，在复杂交互场景中尤为实用。合理使用这个特性，可以创造出更流畅、更精细的用户体验。但切记：能力越大责任越大，不要滥用哦！
CSS3 pointer-events:none应用举例及扩展
weixin_33816821的博客
12-14 700
一、pointer-events:none是？ pointer-events是CSS3中又一冉冉的属性，其支持的值牛毛般多，不过大多都与SVG相关，我们可以不用 理会。当下，对于偶们来讲，与SVG划开界线值得一提的就是[none|auto]两个属性值了。其中”auto”的感觉与width属性的”auto” 类似，一般在一些特殊场合露一手，平时闺门不出，没什么说头。因此，一轮筛选下来，我们需要留意的...
CSS pointer-events 鼠标事件（让标签无法点击）
卡尔特斯
04-27 1189
pointer-events 文档 pointer-events 是CSS3的一个属性，支持的值非常多，其中大部分都是和SVG有关。对于前端日常开发，只要了解 none 这个值就够了。 pointer-events: none; 意思就是让鼠标事件失效（链接、点击等事件）。指定标签例如 button a 之类的标签添加该属性之后，再按就没效果了，同时鼠标在按钮上也不会变成“一只手”了。 除次之外，它还可以禁止标签的页面跳转。 ...
CSS特效：pointer-events: none；的一种特殊应用
q1003675852的博客
07-11 752
本文记录了pointer-events: none;的一种特殊应用，既能显示模糊渐变的同时还能保持元素可点击的效果。
pointer-events:none&pointer-events: auto
weixin_57071684的博客
05-25 2366
当 pointer-events 设置为 none 时,当前元素及其子元素将无法与鼠标或触摸设备产生交互作用。鼠标点击、滑过、甚至移动都不会触发事件。换句话说,pointer-events: none 可以让一个元素无法响应用户输入事件,而保持原有的其他行为(如影响布局)。实现视差滚动效果。通过 pointer-events: none 使滚动层无法响应交互,实现粘性效果。实现遮罩层。pointer-events: none 可以使下层元素无法响应事件,产生遮蔽遮罩的效果。修复点击穿透问题。
CSS3神奇的样式 pointer-events: none;解决JS鼠标事件穿透到子标签
九天翔龙的技术博客
04-11 1万+
最近做一个案例演示的时候，遇到个小问题。要获取鼠标相对标签（为了方便称呼，我们叫它parent标签）的坐标，当然要用到event.offsetX和event.offsetY。 不过，如果鼠标移动到（也可以是点击）parent的子标签（称呼它child）后，就尴尬了，event.offsetX 和 event.offsetY 就不再是相对 parent 的坐标了，而是相对 child的坐标。 举...
pointer-events:none应用场景
a279534269的博客
10-30 795
创建一个产品的时候来联系点击会报主键冲图。解决方法用pointer-events:none，可以防止连续点击 简介 pointer-events: none 真是个神奇的属性。 该属性有什么用？借用 CSS3 pointer-events:none 应用举例及扩展 的总结来说： pointer-events: none 顾名思义，就是鼠标事件拜拜的意思。元素应用了该 CSS 属性，链接啊，点击啊什么的都变成了“浮云牌酱油”。pointer-events: none 的作用是让元素实体 “虚化”。例如一个
前端，css图片穿透，不响应任何鼠标事件或触摸事件
m0_62164804的博客
04-18 369
pointer-events 属性控制一个元素是否能够接收用户的指针事件。指针事件通常指鼠标点击、悬停、拖动，或者触摸事件等。这些事件可以用来触发元素的交互，例如按钮点击、链接跳转、元素拖动等。none：元素不会响应任何鼠标事件或触摸事件，所有指针事件都会被忽略。auto：元素可以正常接收鼠标事件（默认值）。pointer-events的常见值。
css禁用元素指针事件,鼠标穿透,点击下层元素,用`pointer-events:none；`
kfepiza的博客
03-21 2289
属性用于控制HTML元素如何响应鼠标和触摸事件，如点击、悬停等。这个属性决定了在何种情况下元素能够成为鼠标或触摸事件的目标。属性为开发者提供了灵活的方式来控制元素与鼠标和触摸事件的交互，从而可以创建出更丰富、更有趣的用户体验。属性是一个可继承属性，这意味着如果父元素设置了该属性，而子元素没有设置，那么子元素将继承父元素的。属性有多种可能的值，但其中两个最常用的值是。例如，你可以使用以下CSS代码来设置元素的。比如 button按钮 上面有个元素挡着。鼠标穿透,使鼠标事件无效。
css 点击穿透 pointer-events: none；一般用于遮罩
weixin_42729938的博客
04-01 7970
通常我们用遮罩后会覆盖到一些需要点击的事件例如： <div class="demo" click="aaa">111</div> <div class="mask"></div> <style> .mask{ width:100%; height:100vh; background-color:rgba(0,0,0,.5); p
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值