CSS之pointer-events属性

pointer-events 可选的属性值

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

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

为非 svg 元素指定属性值

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

有如下代码:



    

其显示为:

CSS之pointer-events属性_第1张图片
父子多元素重叠

此时,若 #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:两个同级元素的重叠



    

其显示为:

CSS之pointer-events属性_第2张图片
同级元素的重叠

#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 时,点击轮廓部分,该事件能够被捕捉到;


   
 

html 的 svg显示为:

pic-1

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

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

pic-2

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

visibleFill

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


   
 

显示与 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中元素的父元素,父元素不能捕获事件,子元素必然不能捕获;

完!

你可能感兴趣的:(CSS之pointer-events属性)