pointer-events

最新推荐文章于 2021-06-21 14:26:07 发布

「已注销」

最新推荐文章于 2021-06-21 14:26:07 发布

阅读量361

点赞数

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/duola8789/article/details/75014186

版权

CSS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

语法

pointer-events：auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all

取值

auto：与pointer-events属性未指定时的表现效果相同。在svg内容上与visiblepainted值相同
none：元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。
其他值：只能应用在SVG上

说明

使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。

如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。

当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（将会穿过父元素而指向位于其下面的元素）。

注意

为元素的pointer-events指定了none之后，鼠标样式也会失效。

兼容性

IE10及以下不支持，Firefox3.5及以下不支持。

demo

这里写图片描述

大的绿色区域有点击事件，蓝色矩形框不在绿色区域内，绝对定位到这个位置，里面的圆形和矩形有各自的点击事件。

这个时候蓝色框的矩形区域内点击是无法触发绿色背景区域的点击事件的。

现在想要实现的目标是让点击事件投过蓝色框发生到绿色区域，而蓝色框的白色和灰色区域的点击事件仍然发生，所以给蓝色框增加pointer-events：none属性，里面的灰色和白色框增加pointer-events ： auto属性就可以实现。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Label</title>
  <!--pointer-events-->
  <style>
    *{
      margin:0;
      padding:0;
    }
    #outer {
      width: 600px;
      height:600px;
      background: cadetblue;
      cursor: pointer;
    }
    #middle{
      position: absolute;
      left: 150px;
      top:150px;
      width: 400px;
      height:150px;
      border: 1px solid red;
      pointer-events: none;
    }
    #inner1{
      position: absolute;
      left: 20px;
      top:20px;
      width: 50px;
      height:50px;
      border-radius: 50%;
      background: #fff;
      pointer-events:auto;
      cursor: pointer;
    }
    #inner2{
      position: absolute;
      left: 180px;
      top:20px;
      width: 150px;
      height:50px;
      border-radius: 40px;
      background: #d4d4d4;
      pointer-events:auto;
      cursor: pointer;
    }
  </style>
</head>
<body>
<div id="outer">
</div>
<div id="middle">
  <div id="inner1"></div>
  <div id="inner2"></div>
</div>
</body>
<script src="../lib/jquery.min.js"></script>
<script>
  $('#outer').on('click', function(){
    alert("I'm outer")
  });
  $('#inner1').on('click', function(){
    alert("I'm inner1")
  });
  $('#inner2').on('click', function(){
    alert("I'm inner2")
  })
</script>
</html>