pointer-events:none妙用

最近项目中，需要给iframe里所有元素禁用鼠标事件，可实现方法可以通过js去处理。但是偶然间发现pointer-events:none的css3的属性可以轻松解决，不会触发事件。

兼容性：

定义：

CSS属性：可以禁用 HTML 元素的 hover/focus/active 等动态效果。指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target 使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永远不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。当然，位于父元素但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（鼠标活动将会穿过父元素而指向位于其下面的元素）。

none:元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
auto:与pointer-events属性未指定时的表现效果相同

类比：

一些相似的表单控件，禁止使用，可以使用input[type=text|button|radio|checkbox] 支持 disabled 属性，可以实现事件的完全禁用，其他元素可以使用pointer-events:none

使用方式：

例子1,简单禁止使用

<a href="" style="pointer-events: none">click me</a>
这样a标签就会点击不了

例子2，最上层div禁用鼠标事件，但是该div下的鼠标事件需要触发

     <Style>
         .a{
             width: 100px;
             height: 100px;
             background-color: red;
             pointer-events: none;
         }
         .b{
             width: 10px;
             height: 10px;
             background-color: yellow;
             pointer-events: auto;
         }
     </Style>
     <script>
         function a(a) {
             alert(a)
         }
         function b(b) {
             alert(b)
             event.stopPropagation()
         }
     </script>
        <div class="a" onclick="a('a')">
            <div class="b" onclick="b('b')">
            </div>
        </div>