你不知道的pointer-events属性

Posted 2023-03-15

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

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

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

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

实际运用：
https://www.zhangxinxu.com/study/201112/pointer-events-none.html
实现幻影功能
https://www.zhangxinxu.com/study/201112/pointer-events-a-button-disabled.html 实现a标签按钮完全禁用

总结:如果你在一个页面，有个最高的层级覆盖其他层级，但是有不影响其他层级的事件的话，那pointer-events:none这个属性就非常适合你

原文参考: https://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/