JavaScript實現移動端彈窗后禁止滾動

代碼如下

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: falsepassive: falseonce: false

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

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。