JavaScript实现移动端弹窗后禁止滚动


Posted in Javascript onMay 25, 2020

代码如下

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 相关文章推荐
Javascript load Page,load css,load js实现代码
Mar 31 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 Javascript
javascript将url中的参数加密解密代码
Nov 17 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
小程序云开发实现数据库异步操作同步化
May 18 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
JS如何实现手机端输入验证码效果
May 13 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 Javascript
ES2020 已定稿,真实场景案例分析
May 25 #Javascript
Javascript原型链及instanceof原理详解
May 25 #Javascript
Node登录权限验证token验证实现的方法示例
May 25 #Javascript
详解Node.js使用token进行认证的简单示例
May 25 #Javascript
基于redis的小程序登录实现方法流程分析
May 25 #Javascript
JSONP解决JS跨域问题的实现
May 25 #Javascript
JS实现时间校验的代码
May 25 #Javascript
You might like
php IP转换整形(ip2long)的详解
2013/06/06 PHP
解析如何在PHP下载文件名中解决乱码的问题
2013/06/20 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
Three.js基础部分学习
2017/01/08 Javascript
js实现拖拽功能
2017/03/01 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
JSONP 的原理、理解 与 实例分析
2020/05/16 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python判断Abundant Number的方法
2015/06/15 Python
python简单分割文件的方法
2015/07/30 Python
理解python正则表达式
2016/01/15 Python
Python中的id()函数指的什么
2017/10/17 Python
python实现跨excel的工作表sheet之间的复制方法
2018/05/03 Python
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
个人评价范文分享
2014/01/11 职场文书
本科毕业生自荐信
2014/05/26 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
工作态度不好检讨书
2015/05/06 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
Pandas加速代码之避免使用for循环
2021/05/30 Python
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers