欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-25 08:11:35
代码如下computed:{ popupstatus(){ return this.sendcircle_visible || this.generateinfo_visible || thi...

代码如下

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() 也不会生效。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。