pointer-event属性详解

一、pointer-event属性可以指定在什么情况下元素可以成为鼠标事件

二、取值：

 1、pointer-event:auto;(默认值)，对于svg元素，该值与visiblePainted效果相同
 
 2、pointer-event:none;元素不会成为鼠标事件的target
 
 3、pointer-event:visiblePainted;只适用于SVG元素，元素只有在以下情况才会成为鼠标事件的目标：
		① visibility属性值：visible，且鼠标指针在元素内部，且fill属性值非none
		② visibility属性值：visible，鼠标指针在元素边界上，且stroke属性值非none
		
 4、pointer-event:visibleFill;只适用于SVG元素，元素只有在以下情况才会成为鼠标事件的目标：
		① visibility属性值：visible，且鼠标指针在元素内部
		
 5、pointer-event:visibleStroke;只适用于SVG元素，元素只有在以下情况才会成为鼠标事件的目标：
		① visibility属性值：visible，且鼠标指针在元素边界			
		
 6、pointer-event:visible;只适用于SVG元素，元素只有在以下情况才会成为鼠标事件的目标：
		① visibility属性值：visible，且鼠标指针在元素内部或边界
		
 7、pointer-event:fill;只适用于SVG元素，元素只有在以下情况才会成为鼠标事件的目标：
		① 只有鼠标指针在元素内部时		
		
 8、pointer-event:stroke;只适用于SVG元素，元素只有在以下情况才会成为鼠标事件的目标：
		① 只有鼠标指针在元素边界上时
		
 9、pointer-event:stroke;只适用于SVG元素，元素只有在以下情况才会成为鼠标事件的目标：
		① 只有鼠标指针在元素内部或边界时

三、注意：

父元素如果设置了pointer-event:none 并不意味着父元素上的事件侦听器永远不会被触发，当子元素上设置pointer-event值不是none,

那么都可以通过事件传播机制来触发父元素上的事件。

四、pointer-event：none的运用场景：

1、  任何元素设置pointer-event：none的效果相当于input[type=text|button|radio|checkbox] 设置disabled 属性，可以实现事件的禁用，例如：

    <a href="xxxxxx" style="pointer-events: none">click me</a>
    
    这个链接，是点不了的，并且 hover 也没有效果,但是可以通过tab来选中该元素，并按下enter键来触发链接，当href属性去掉，就不能通过tab进行触发
    
2、  当要禁用select下拉框可以设置pointer-event:none；

3、  当很多元素需要定位在一个地图层上面，需用到绝对定位、相对定位的元素，这样的话，这些元素就会盖住下面的地图层，

以至于地图层无法操作。这时元素设置 pointer-events: none，然后地图就可以拖动和点击了。但是操作区域本身却无法操作

了，可以再给需要操作的元素区域设置为 pointer-events:auto