html dom style pointer-events,CSS之pointer-events属性

pointer-events 可选的属性值

auto

none

visiblepainted

visiblefill

visiblestroke

visible

painted

fill

stroke

all

其中，对于非 元素，只有属性 auto 和 none 有效；

为非 svg 元素指定属性值

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

有如下代码：

#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;

}

其显示为：

父子多元素重叠

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

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

总结：

元素默认的 pointer-events 属性为 auto ，鼠标(其实不一定是鼠标，也可以是手或触摸笔对屏幕的动作) 在该元素的一个动作能够被该元素捕获，进行相应代码的执行后，会将该事件转交给父元素执行相应动作；

将元素的 pinter-events 属性设置为 none，鼠标的动作将不能被该元素及其子元素所捕获，但是能够被其父元素所捕获；

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

#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;

}

其显示为：

同级元素的重叠

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

fill="red" οnclick="alert('circle')" />

html 的 svg显示为：

pic-1

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

当将 circle 中 fill 的属性变为 none ，显示变为：

pic-2

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

visibleFill

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

fill="none" οnclick="alert('circle')" />

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

完！