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 ；
总结：
- 元素默认的
pointer-events属性为auto，鼠标(其实不一定是鼠标，也可以是手或触摸笔对屏幕的动作) 在该元素的一个动作能够被该元素捕获，进行相应代码的执行后，会将该事件转交给父元素执行相应动作； - 将元素的
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>
其显示为：
同级元素的重叠
当 #div2 的 pointer-events 属性为 "auto" 时，当点击蓝色区域后，浏览器只弹出对话框一次，内容为：div2；当 #div2 的 pointer-events 属性为 none 时，点击蓝色区域后，浏览器只弹出对话框一次，内容为 div1 ；
总结：
- 若HTML上两个元素之间没有包含关系，那么，鼠标事件就不会在这两个元素之间传递，而是上层的元素会覆盖下层的元素，导致下层元素捕获不到事件；将上层元素的
pointer-events属性设置为none，则上层元素将不捕获事件，那么事件将被下层元素捕获到； - 若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 ；
当将 circle 中 fill 的属性变为 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 属性的取值； -
第二列表示当
fill为 none 时，点击填充能否被捕捉到； -
第三列表示当
fill不为 none 时，点击填充能否被捕捉到； -
第四列表示当
stroke为 none 时，点击轮廓能否被捕捉到； -
第五列表示当
stroke不为 none 时，点击轮廓能否被捕捉到； -
以上4中情况，
visibility都为默认值，即 visible； -
第六列表示当设置
visiblility为 hidden 时，点击元素是否能被捕捉到，如果为 × ，表示无论点击轮廓或填充，都不能捕捉到，如果为 - 表示行为和前4种情况一样，visibility不产生影响；注意：因为元素隐藏，不能看到元素，所以所说的点击填充只是其对应的位置而已； -
第七列表示
visibilibty为 visible 时的情况；可以看到，在pointer-events为 none 时，无论怎么设置，元素都不能捕获事件，可以理解为svg是所有 svg中元素的父元素，父元素不能捕获事件，子元素必然不能捕获；
完！
网友评论