你不知道的CSS3属性pointer-events

通过研究element-ui源码发现pointer-events属性，它能够禁止用户的鼠标事件，点击事件失效，神奇的是在Chrome中审查元素鼠标竟然无法选中，好像被Chrome“无视”一样，立马激起我的好奇心。

借用张鑫旭老师的博客中话解释：

我个人(张鑫旭老师)将pointer-events:none理解为“幻影特性”。原话如下：

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

CSS3 pointer-events:none应用举例及扩展 www.zhangxinxu.com/wordpress/?…

pointer-events:none提高页面滚动时候的绘制性能？www.zhangxinxu.com/wordpress/?…

转载于:https://juejin.im/post/5cf480d351882546934e5c71