CSS之pointer-events属性

pointer-events 可选的属性值

auto
none
visiblepainted
visiblefill
visiblestroke
visible
painted
fill
stroke
all
其中，对于非 svg 元素，只有属性 auto 和 none 有效；

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

有如下代码：

    
"div_grandfather" οnclick="alert('grandfather')">
        
"div_parent" οnclick="alert('parent')">
            
"div_child" οnclick="alert('child')">
            
        
    

其显示为：

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

    
"div1" οnclick="alert('div1')">
    
"div2" οnclick="alert('div2')">

其显示为：

当 #div2 的 pointer-events 属性为 “auto” 时，当点击蓝色区域后，浏览器只弹出对话框一次，内容为：div2；当 #div2 的 pointer-events 属性为 none 时，点击蓝色区域后，浏览器只弹出对话框一次，内容为 div1 ；

总结：

若HTML上两个元素之间没有包含关系，那么，鼠标事件就不会在这两个元素之间传递，而是上层的元素会覆盖下层的元素，导致下层元素捕获不到事件；将上层元素的 pointer-events 属性设置为 none ，则上层元素将不捕获事件，那么事件将被下层元素捕获到；
若HTML上两个元素间有包含关系，那么，子元素获得鼠标事件后，会传递给父元素；
可见，事件的传递并不是依赖于元素在显示上的上下层关系，而是依赖于DOM树结构；