解决pointer-events:none无效问题

解决pointer-events:none无效问题

背景

我们在开发过程中有时候会做一个弹出层或者弹出窗口，这个时候就会有一个遮罩层，而这个遮罩层的作用不只是为了凸显弹出框，还有一个作用就是隔绝遮罩层下的操作。
比如：

左边半透明的就是遮罩层，右边就是弹出层（因为这是我正式的系统，不好全部截图，大家见谅）
在弹出这个弹出层之后，正常情况是不能操作遮罩层遮住的那一部分下面的按钮的，我在网上找了很多解决方法，都是说在遮罩层上加样式：pointer-events:none，但是没用，这个样式无效，后面我想到是不是被这个遮罩层的父级元素影响了，结果证明确实如此。

解决方法

找到问题之后就要解决了。
在打开弹出层，生成这个遮罩层的时候，给这个遮罩层加一个样式：pointer-events:none，并且给body也个一个这样的样式：pointer-events:none；方法：$("body").css("pointer-events","none");当关闭弹出层，删除遮罩层的时候记得把body的这个样式去掉，方法：$(“body”).css(“pointer-events”,“auto”);

完美！