程式碼如下

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',options);
    }
  }
}

配置說明

addEventListener目前第三個引數可以為布林值或物件

addEventListener(type,listener[,useCapture ])
addEventListener(type,options ])

為物件時預設配置如下

capture: false
passive: false
once: false

其中 capture 屬性等價於以前的 useCapture 引數；once 屬性就是表明該監聽器是一次性的，執行一次後就被自動 removeEventListener 掉。

passive是因為瀏覽器無法預先知道一個監聽器會不會呼叫 preventDefault()，只有等監聽器執行完後再去執行預設行為，因此就會導致頁面卡頓。而一旦passive為true，瀏覽器就可以直接執行預設行為而不等待。此時即使呼叫了 preventDefault() 也不會生效。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。