你不知道的pointer-events属性

在前几天接到一个需求是要给后台管理系统加上文字水印的功能，使用了一个water-mark-oc的第三方插件的实现，然后去看里面的源码究竟是怎么实现这个水印功能的，当时就很好奇为何在页面z轴最上层增加了一个层却完全不会影响下面元素的任何事件响应，简直是前端黑科技，后来发现里面使用了一个的css属性：pointer-events：none，

看上去确实很神奇，以为会是事件冒泡代理转发之类的很难懂的概念。实际上超级简单，对某一个元素比如div采用div{pointer-events:none}即可让这个HTML元素（包括它的所有子孙元素）失去所有的事件响应。鼠标焦点会直接无视它，click、mouseover等所有事件会穿透它到达它的下一级元素

pointer-events:none的作用是让元素实体“虚化”。例如一个应用pointer-events:none的按钮元素，则我们在页面上看到的这个按钮，只是一个虚幻的影子而已，您可以理解为海市蜃楼，幽灵的躯体。当我们用手触碰它的时候可以轻易地没有任何感觉地从中穿过去。

如果这个css3属性浏览器不支持可以通过用js来扩展

实际运用：

>

div>span是获取所有div下子元素中的span,不获取孙元素或者更深层次的元素。

   <span id="span1"></span>

  <a href="#">

      <span id="span2"></span>

  </a>

</div>

比如上面这段代码，你使用div span获取可以获取到span1和span2，使用div>span获取只能获取到span1

使用 documentall 方法获得文档元素内所有 HTML 标记的集合

documentall 方法最初是由 IE 浏览器拥有的，并不属于 W3C 规范范畴，他返回调用 all 方法的 HTML 标记自身内的所有子孙元素的 HTML 标记集合 。

在 IE 中 documentall 的布尔值是 true ，其他浏览器都是 false。

所以以前往往通过documentall方式判断支持的浏览器是否是IE。

以上就是关于你不知道的pointer-events属性全部的内容，包括:你不知道的pointer-events属性、获取子元素的时候 div span ；与 div>span 到底有什么区别、JavaScript中document.all是做什么用的等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！