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 相关文章推荐
基于JQUERY的多级联动代码
Jan 24 Javascript
Jquery 动态循环输出表格具体方法
Nov 23 Javascript
jquery插件之定时查询待处理任务数量
May 01 Javascript
jQuery老黄历完整实现方法
Jan 16 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 Javascript
图解JavaScript中的this关键字
May 28 Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 Javascript
浅谈Angular单元测试总结
Mar 22 Javascript
layui 富文本赋值,取值,取纯文本值的实例
Sep 18 Javascript
ZK中使用JS读取客户端txt文件内容问题
Nov 07 Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 Javascript
JQuery表单元素取值赋值方法总结
May 12 jQuery
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中上传大体积文件时需要的设置
2006/10/09 PHP
php在apache环境下实现gzip配置方法
2015/04/02 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
js对数字的格式化使用说明
2011/01/12 Javascript
Javascript图像处理思路及实现代码
2012/12/25 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
js中document.write的那点事
2014/12/12 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
JavaScript之数组扁平化详解
2019/06/03 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python动态监控日志内容的示例
2014/02/16 Python
python发送邮件功能实现代码
2016/07/15 Python
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
解析Python3中的Import
2019/10/13 Python
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
试述DBMS的主要功能
2016/11/13 面试题
仓管员岗位职责范文
2013/11/08 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
奖励申请报告范文
2015/05/15 职场文书
行政申诉状范文
2015/05/20 职场文书
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang