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 相关文章推荐
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
摘自百度的图片轮换效果代码
Nov 19 Javascript
简单实例处理url特殊符号&处理(2种方法)
Apr 02 Javascript
javascript动态添加删除tabs标签的方法
Jul 06 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
JavaScript获取页面中超链接数量的方法
Nov 09 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 Javascript
angularjs实现首页轮播图效果
Apr 14 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 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、Python和Javascript的装饰器模式对比
2015/02/03 PHP
实例讲解php数据访问
2016/05/09 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
JsDom 编程小结
2011/08/09 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
简介JavaScript中setUTCSeconds()方法的使用
2015/06/12 Javascript
JavaScript事件 "事件对象"的注意要点
2016/01/14 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
Python实现身份证号码解析
2015/09/01 Python
详解python之简单主机批量管理工具
2017/01/27 Python
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
大学生毕业自我评价范文分享
2013/11/07 职场文书
顶岗实习接收函
2014/01/09 职场文书
代理协议书
2014/04/22 职场文书
2014中考励志标语
2014/06/05 职场文书
车辆委托书范本
2014/10/05 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
2015年护士节活动总结
2015/02/10 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
golang正则之命名分组方式
2021/04/25 Golang
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫