解决pointer-events:none无效问题
背景
我们在开发过程中有时候会做一个弹出层或者弹出窗口,这个时候就会有一个遮罩层,而这个遮罩层的作用不只是为了凸显弹出框,还有一个作用就是隔绝遮罩层下的操作。
比如:
左边半透明的就是遮罩层,右边就是弹出层(因为这是我正式的系统,不好全部截图,大家见谅)
在弹出这个弹出层之后,正常情况是不能操作遮罩层遮住的那一部分下面的按钮的,我在网上找了很多解决方法,都是说在遮罩层上加样式:pointer-events:none,但是没用,这个样式无效,后面我想到是不是被这个遮罩层的父级元素影响了,结果证明确实如此。
解决方法
找到问题之后就要解决了。
在打开弹出层,生成这个遮罩层的时候,给这个遮罩层加一个样式:pointer-events:none,并且给body也个一个这样的样式:pointer-events:none;方法:
(
"
b
o
d
y
"
)
.
c
s
s
(
"
p
o
i
n
t
e
r
−
e
v
e
n
t
s
"
,
"
n
o
n
e
"
)
;
当关闭弹出层,删除遮罩层的时候记得把
b
o
d
y
的这个样式去掉,方法:
("body").css("pointer-events","none"); 当关闭弹出层,删除遮罩层的时候记得把body的这个样式去掉,方法:
("body").css("pointer−events","none");当关闭弹出层,删除遮罩层的时候记得把body的这个样式去掉,方法:(“body”).css(“pointer-events”,“auto”);