JavaScript實現(xiàn)移動端彈窗后禁止?jié)L動
代碼如下
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 = ''; // 出現(xiàn)滾動條 document.removeEventListener('touchmove', preD, options); } } }
配置說明
addEventListener目前第三個參數(shù)可以為布爾值或對象
addEventListener(type, listener[, useCapture ])
addEventListener(type, listener[, options ])
為對象時默認配置如下
capture: false
passive: false
once: false
其中 capture 屬性等價于以前的 useCapture 參數(shù);once 屬性就是表明該監(jiān)聽器是一次性的,執(zhí)行一次后就被自動 removeEventListener 掉。
passive是因為瀏覽器無法預先知道一個監(jiān)聽器會不會調用 preventDefault(),只有等監(jiān)聽器執(zhí)行完后再去執(zhí)行默認行為,因此就會導致頁面卡頓。而一旦passive為true,瀏覽器就可以直接執(zhí)行默認行為而不等待。此時即使調用了 preventDefault() 也不會生效。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
setTimeout 函數(shù)在前端延遲搜索實現(xiàn)中的作用詳解
這篇文章主要為大家介紹了setTimeout 函數(shù)在前端延遲搜索實現(xiàn)中的作用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12解決window.opener=null;window.close(),只支持IE6不支持IE7,IE8的問題
本篇文章主要是對window.opener=null;window.close(),只支持IE6不支持IE7,IE8的解決方法進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01