CSS之pointer-events属性

pointer-events 可选的属性值

  • auto
  • none
  • visiblepainted
  • visiblefill
  • visiblestroke
  • visible
  • painted
  • fill
  • stroke
  • all

其中,对于非 <svg> 元素,只有属性 auto 和 none 有效;

为非 svg 元素指定属性值

情况1:两个父子元素重叠

有如下代码:

<style type="text/css">
    #div_grandfather{
        height : 250px;
        background: orange;
        width:300px;
        border:1px solid;
    }
    #div_parent{
        height:70%;
        background-color:#bbb;
        margin:30px;
        border: 1px solid;
        /*设置元素的 pointer-event属性*/
        pointer-events: auto;
    }
    #div_child{
        height:70%;
        background-color:deepskyblue;
        margin:30px;
    }
</style>
<body>
    <div id="div_grandfather" onclick="alert('grandfather')">
        <div id="div_parent" onclick="alert('parent')">
            <div id="div_child" onclick="alert('child')">
            </div>
        </div>
    </div>
</body>

其显示为:

父子多元素重叠

此时,若 #div_parent 的css属性ponter-events 设为 auto ,则点击蓝色区域后,浏览器会3次弹出对话框,第一次内容为 child ,第二次内容为 parent ,第三次内容为 grandfather

#div_parent 的css属性 pointer-events 设为 none ,则点击蓝色区域后,浏览器只会弹出对话框一次,内容为 grandfather

总结:

  1. 元素默认的 pointer-events 属性为 auto ,鼠标(其实不一定是鼠标,也可以是手或触摸笔对屏幕的动作) 在该元素的一个动作能够被该元素捕获,进行相应代码的执行后,会将该事件转交给父元素执行相应动作;
  2. 将元素的 pinter-events 属性设置为 none,鼠标的动作将不能被该元素及其子元素所捕获,但是能够被其父元素所捕获;

情况2:两个同级元素的重叠

<style type="text/css">
    #div1{
        position: absolute;
        height:250px;
        width:250px;
        background-color:#bbb;
        top:20px;
        left:20px;
    }
    #div2{
        position: absolute;
        height: 150px;
        width: 150px;
        background-color:deepskyblue;
        top:40px;
        left:40px;
        pointer-events: auto;
    }
</style>
<body>
    <div id="div1" onclick="alert('div1')"></div>
    <div id="div2" onclick="alert('div2')"></div>
</body>

其显示为:

同级元素的重叠

#div2pointer-events 属性为 "auto" 时,当点击蓝色区域后,浏览器只弹出对话框一次,内容为:div2;当 #div2pointer-events 属性为 none 时,点击蓝色区域后,浏览器只弹出对话框一次,内容为 div1

总结:

  1. 若HTML上两个元素之间没有包含关系,那么,鼠标事件就不会在这两个元素之间传递,而是上层的元素会覆盖下层的元素,导致下层元素捕获不到事件;将上层元素的 pointer-events 属性设置为 none ,则上层元素将不捕获事件,那么事件将被下层元素捕获到;
  2. 若HTML上两个元素间有包含关系,那么,子元素获得鼠标事件后,会传递给父元素;

可见,事件的传递并不是依赖于元素在显示上的上下层关系,而是依赖于DOM树结构;

为SVG 元素指定属性值

剩余的8个属性值都是为SVG元素而准备的;

首先,我们需要知道,一个图形有两部分组成,一部分是轮廓线,另一部分是填充;轮廓线通过 stroke 完成,填充通过 fill 完成;

visiblePainted

该属性值等价于 auto ; 当 svg 中的某个元素可见,并且当其 fill 不是 none 时,点击填充部分,该事件能够被捕捉到,当其 stroke 不是 none 时,点击轮廓部分,该事件能够被捕捉到;

<svg style="pointer-events:visiblePointed;">
   <circle cx="30" cy="30" r="20" stroke="black" stroke-width="10"
      fill="red"  onclick="alert('circle')" />
</svg> 

html 的 svg显示为:

pic-1

点击之后(无论点击的是黑色轮廓还是红色填充),会弹出一个对话框,内容为 circle

当将 circlefill 的属性变为 none ,显示变为:

pic-2

此时,没有填充,点击黑色轮廓能够弹出对话框,而点击中间的白色部分将不能弹出对话框;

visibleFill

将svg的 pointer-events 属性设置为visibleFill后:

<svg style="pointer-events:visiblePointed;">
   <circle cx="30" cy="30" r="20" stroke="black" stroke-width="10"
      fill="none"  onclick="alert('circle')" />
</svg> 

显示与 pic-2 一样;此时,无论 fill 的值是不是 none,点击填充后,都能弹出对话框,而点击轮廓一定不能弹出对话框;

下面几个属性都这样说明下去未免太过罗嗦,下面是总结的一个表,对8种属性的统一说明:

|属性名|fill||stroke||visibility||
|-|-|-|
|属性值|none|非none|none|非none|hidden|visible|
|visiblePainted|×|√|×|√|×|-|
|visibleFill|√|√|×|×|×|-|
|visibleStroke|×|×|√|√|×|-|
|visible|√|√|√|√|×|-|
|painted|×|√|×|√|-|-|
|fill|√|√|×|×|-|-|
|stroke|×|×|√|√|-|-|
|all|√|√|√|√|-|-|
|none|×|×|×|×|×|×|

解释:

  • "√" 表示点击相应的部分(填充或轮廓)能够被对应的 svg元素所捕捉到; "×" 表示不能被对应的svg元素捕捉到;"-" 表示没影响;

  • 第一列表示 svg 元素的 pointer-events 属性的取值;

  • 第二列表示当 fillnone 时,点击填充能否被捕捉到;

  • 第三列表示当 fill不为 none 时,点击填充能否被捕捉到;

  • 第四列表示当 strokenone 时,点击轮廓能否被捕捉到;

  • 第五列表示当 stroke 不为 none 时,点击轮廓能否被捕捉到;

  • 以上4中情况,visibility 都为默认值,即 visible

  • 第六列表示当设置 visiblilityhidden 时,点击元素是否能被捕捉到,如果为 × ,表示无论点击轮廓或填充,都不能捕捉到,如果为 - 表示行为和前4种情况一样,visibility 不产生影响;注意:因为元素隐藏,不能看到元素,所以所说的点击填充只是其对应的位置而已;

  • 第七列表示 visibilibtyvisible 时的情况;可以看到,在 pointer-eventsnone 时,无论怎么设置,元素都不能捕获事件,可以理解为 svg 是所有 svg中元素的父元素,父元素不能捕获事件,子元素必然不能捕获;

完!

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 104,046评论 12 125
  • 最近在研究页面渲染及web动画的性能问题,以及拜读《CSS SECRET》【https://github.com/...
    qyer0222阅读 1,310评论 0 6
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 773评论 0 2
  • 连续几个周末都是阴云密布,今天终于能好好的休息一天了。忙的时候总是在想等闲下来的时候要干这个干那个,但是真正到了这...
    罗罗飞66阅读 40评论 0 0
  • Java 中的异常处理机制:Java中的异常有两大类:Error:系统错误,往往是 由软件运行的硬件换件遭破坏所导...
    itachi阅读 311评论 0 2