代码如下
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 速成计划第二篇(杂项详解:JS操作HTML 与 CSS、异常、事件)!
教你搭建 nodejs+mongoose+Graphql+Vue+Typescript 框架(上)
【Nginx】如何为已安装的Nginx动态添加模块?看完我懂了!!
网友评论