JavaScript实现移动端弹窗后禁止滚动
代码如下
computed:{
popupStatus(){
returnthis.SendCircle_visible||this.generateInfo_visible||this.isPosterShow;
}
},
methods:{
stopTouch(e){
e.preventDefault();
},
},
watch:{
popupStatus(val){
letpreD=this.stopTouch;
letoptions={
passive:false,//强调默认事件
capture:true,//早点禁止该事件
};
if(val){
document.body.style.overflow='hidden';
document.addEventListener('touchmove',preD,options);//禁止页面滑动
}else{
document.body.style.overflow='';//出现滚动条
document.removeEventListener('touchmove',preD,options);
}
}
}
配置说明
addEventListener目前第三个参数可以为布尔值或对象
addEventListener(type,listener[,useCapture])
addEventListener(type,listener[,options])
为对象时默认配置如下
capture:false
passive:false
once:false
其中capture属性等价于以前的useCapture参数；once属性就是表明该监听器是一次性的，执行一次后就被自动removeEventListener掉。
passive是因为浏览器无法预先知道一个监听器会不会调用preventDefault()，只有等监听器执行完后再去执行默认行为，因此就会导致页面卡顿。而一旦passive为true，浏览器就可以直接执行默认行为而不等待。此时即使调用了preventDefault()也不会生效。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。