JavaScript實現(xiàn)移動端彈窗后禁止?jié)L動
更新時間：2020年05月25日 11:58:13 作者：千年輪回
這篇文章主要介紹了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, //強調(diào)默認事件
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)聽器會不會調(diào)用 preventDefault()，只有等監(jiān)聽器執(zhí)行完后再去執(zhí)行默認行為，因此就會導致頁面卡頓。而一旦passive為true，瀏覽器就可以直接執(zhí)行默認行為而不等待。此時即使調(diào)用了 preventDefault() 也不會生效。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
相信大家都知道圖表是數(shù)據(jù)圖形化的表示，通過形象的圖表來展示數(shù)據(jù)，比如條形圖，折線圖，餅圖等。可視化圖表可以幫助開發(fā)者更容易理解復雜的數(shù)據(jù)，提高生產(chǎn)的效率和Web應用和項目的可靠性?，F(xiàn)在就讓我們大家一起來學習用D3.js來實現(xiàn)餅圖的方法，有需要的可以參考借鑒。2016-09-09
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)分頁點擊控件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家詳細介紹了javascript實現(xiàn)點擊按鈕變色，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了Nuxt v-bind綁定img src不顯示的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
使用BootStrap建立響應式網(wǎng)頁——通欄輪播圖（carousel）
這篇文章主要介紹了使用BootStrap建立響應式網(wǎng)頁通欄輪播圖（carousel）的相關資料,需要的朋友可以參考下2016-12-12
深入理解JS中Number()，parseInt()，parseFloat()三者比較
這篇文章主要介紹了JS中Number()，parseInt()，parseFloat()三者比較,需要的朋友可以參考下2018-08-08
這篇文章介紹了JavaScript的防抖和節(jié)流案例的代碼實現(xiàn)和概念.包含詳細的代碼,希望對你有所幫助2021-06-06
端午節(jié)馬上就到了，聽說你們公司沒發(fā)粽子大禮包？沒關系，這里用?JS實現(xiàn)了一個簡單的接粽子小游戲，能接到多少粽子，完全看你手速，快跟隨小編一起來學習學習吧2022-05-05
今天小編就為大家分享一篇layui的表單提交以及驗證和修改彈框的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)圖片輪播切換效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12