JavaScript实现移动端弹窗后禁止滚动
更新时间：2020年05月25日 11:58:13 作者：千年轮回
这篇文章主要介绍了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() 也不会生效。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Select联动带跳转的效果想必大家并不陌生吧，下面有个不错的示例，感兴趣的朋友可以参考下2013-10-10
使用纯前端JavaScript实现Excel导入导出方法过程详解
这篇文章主要介绍了使用纯前端JavaScript实现Excel导入导出方法过程详解，文章通过示例代码和图文解析介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
这篇文章主要为大家详细介绍了JavaScript实现网页跨年倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要介绍了webpack 4 升级迁移的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了JS实现课程表小程序(仿超级课程表)加入自定义背景功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-12-12
这篇文章主要介绍了javascript合并两个数组最简单的实现方法，方法很简单，有需要的朋友们可以学习下。2019-09-09
这篇文章主要为大家详细介绍了JS实现省市县三级下拉联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-04-04
这篇文章介绍了clipboard.js实现复制功能的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
这篇文章主要为大家详细介绍了聊一聊JS中this的指向问题，帮助大家轻松了解JS中this的指向，感兴趣的小伙伴们可以参考一下2016-06-06
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
这篇文章主要介绍了微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示的实现，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-07-07
最新评论