这篇文章主要讲解了JavaScript实现移动端弹窗后禁止滚动的方法，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。
代码如下
计算
安全
数据库
网络和加速
企业服务
computed:{
popupStatus(){
return this.SendCircle_visible || this.generateInfo_visible || this.isPosterShow;
}
},
methods:{
stopTouch(e){
e.preventDefault();
},
},
watch: {
popupStatus(val) {
let preD = this.stopTouch;
let options = {
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() 也不会生效。
看完上述内容，是不是对JavaScript实现移动端弹窗后禁止滚动的方法有进一步的了解，如果还想学习更多内容，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
