新聞中心
本篇文章給大家分享的是有關如何解決webapp頁面滾動卡頓問題,小編覺得挺實用的,因此分享給大家學習,希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
addEventListener的useCapture參數(shù)
基本概念:xxx.addEventListener('事件名', function(xxx){xxx}, useCapture).
第一個參數(shù)表示事件名稱(不含 on,如 "click");第二個參數(shù)表示要接收事件處理的函數(shù);第三個參數(shù)為 useCapture.
下面就來看看這個東西是個啥意思,直接舉例子說明更加直觀。
請在此點擊
var level1 = document.getElementById("level1"); var level2 = document.getElementById("level2"); var level3= document.getElementById("level3"); var info = document.getElementById("info"); outDiv.addEventListener("click", function () { info.innerHTML += "level1" + "
"; }, false); middleDiv.addEventListener("click", function () { info.innerHTML += "level2" + "
"; }, false); inDiv.addEventListener("click", function () { info.innerHTML += "level3" + "
"; }, false);
根據(jù)上述代碼來看這個 useCapture 為 true 和 false的作用效果:
全為 false 時,觸發(fā)順序為:level3、level2、level1
全為 true 時,觸發(fā)順序為:level1、level2、level3
level1為 true,其他為 false 時,觸發(fā)順序為:level1、level3、level2
level2為 true,其他為 false 時,觸發(fā)順序為:level2、level3、level1
level3為 true,其他為 false 時,觸發(fā)順序為:level3、level2、level1
level1為 false,其他為 true時,觸發(fā)順序為:level2、level3、level1
level2為 false,其他為 true時,觸發(fā)順序為:level1、level3、level2
level3為 false,其他為 true時,觸發(fā)順序為:level1、level2、level3
由上述結果得出如下結論:
true 的觸發(fā)順序總是在 false 之前;
如果多個均為 true,則外層的觸發(fā)先于內(nèi)層;
如果多個均為 false,則內(nèi)層的觸發(fā)先于外層。
passive屬性來控制事件行為
使用方式如下
addEventListener('事件名', function(xxx){xxx}, { capture: false, passive: false, once: false })
三個屬性都是布爾類型的開關,默認值都為 false。
capture:等價于以前的 useCapture 參數(shù);
once:就是表明該監(jiān)聽器是一次性的,執(zhí)行一次后就被自動 removeEventListener 掉;
passive:用于webapp的touch事件
以上就是如何解決webapp頁面滾動卡頓問題,小編相信有部分知識點可能是我們?nèi)粘9ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
標題名稱:如何解決webapp頁面滾動卡頓問題-創(chuàng)新互聯(lián)
鏈接地址:http://fisionsoft.com.cn/article/cccppd.html