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脚本代码跑起来。
Jan 09 Javascript
实现动画效果核心方式的js代码
Sep 27 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
js this函数调用无需再次抓获id,name或标签名
Mar 03 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
跟我学习javascript的call(),apply(),bind()与回调
Nov 16 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
Vue中如何实现proxy代理
Apr 20 Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 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
安装APACHE
2007/01/15 PHP
PHP Stream_*系列函数
2010/08/01 PHP
php下批量挂马和批量清马代码
2011/02/27 PHP
PHP多个文件上传到服务器实例
2014/10/29 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
javascript实现页面滚屏效果
2017/01/17 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
2020/09/16 Javascript
Python中转换角度为弧度的radians()方法
2015/05/18 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
python读取LMDB中图像的方法
2018/07/02 Python
django使用xadmin的全局配置详解
2019/11/15 Python
Python assert关键字原理及实例解析
2019/12/13 Python
PyTorch中permute的用法详解
2019/12/30 Python
Python列表如何更新值
2020/05/27 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
印度购物网站:TATA CLiQ
2017/11/23 全球购物
关键字final的用法
2013/10/02 面试题
工程质量承诺书范文
2014/03/27 职场文书
消防安全责任书范本
2014/04/15 职场文书
新书发布会策划方案
2014/06/09 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
大二学年个人总结
2015/03/03 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
Redis 哨兵集群的实现
2021/06/18 Redis