本篇文章給大家分享的是有關(guān)如何解決webapp頁(yè)面滾動(dòng)卡頓問(wèn)題，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

創(chuàng)新互聯(lián)是一家專注網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷策劃、小程序開(kāi)發(fā)、電子商務(wù)建設(shè)、網(wǎng)絡(luò)推廣、移動(dòng)互聯(lián)開(kāi)發(fā)、研究、服務(wù)為一體的技術(shù)型公司。公司成立十多年以來(lái)，已經(jīng)為1000+砂巖浮雕各業(yè)的企業(yè)公司提供互聯(lián)網(wǎng)服務(wù)?，F(xiàn)在，服務(wù)的1000+客戶與我們一路同行，見(jiàn)證我們的成長(zhǎng)；未來(lái)，我們一起分享成功的喜悅。

addEventListener的useCapture參數(shù)

基本概念：xxx.addEventListener('事件名', function(xxx){xxx}, useCapture).

第一個(gè)參數(shù)表示事件名稱（不含 on，如 "click"）；第二個(gè)參數(shù)表示要接收事件處理的函數(shù)；第三個(gè)參數(shù)為 useCapture.

下面就來(lái)看看這個(gè)東西是個(gè)啥意思，直接舉例子說(shuō)明更加直觀。

<div id="level1">
  <div id="level2">
    <div id="level3">請(qǐng)?jiān)诖它c(diǎn)擊</div>
  </div>
</div>
<div id="info">
</div>

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" + "<br>"; }, false);
middleDiv.addEventListener("click", function () { info.innerHTML += "level2" + "<br>"; }, false);
inDiv.addEventListener("click", function () { info.innerHTML += "level3" + "<br>"; }, false);

根據(jù)上述代碼來(lái)看這個(gè) useCapture 為 true 和 false的作用效果：

全為 false 時(shí)，觸發(fā)順序?yàn)椋簂evel3、level2、level1
全為 true 時(shí)，觸發(fā)順序?yàn)椋簂evel1、level2、level3
level1為 true，其他為 false 時(shí)，觸發(fā)順序?yàn)椋簂evel1、level3、level2
level2為 true，其他為 false 時(shí)，觸發(fā)順序?yàn)椋簂evel2、level3、level1
level3為 true，其他為 false 時(shí)，觸發(fā)順序?yàn)椋簂evel3、level2、level1
level1為 false，其他為 true時(shí)，觸發(fā)順序?yàn)椋簂evel2、level3、level1
level2為 false，其他為 true時(shí)，觸發(fā)順序?yàn)椋簂evel1、level3、level2
level3為 false，其他為 true時(shí)，觸發(fā)順序?yàn)椋簂evel1、level2、level3

由上述結(jié)果得出如下結(jié)論：

true 的觸發(fā)順序總是在 false 之前；
如果多個(gè)均為 true，則外層的觸發(fā)先于內(nèi)層；
如果多個(gè)均為 false，則內(nèi)層的觸發(fā)先于外層。

passive屬性來(lái)控制事件行為

使用方式如下

addEventListener('事件名', function(xxx){xxx}, {
    capture: false,
    passive: false,
    once: false
})

三個(gè)屬性都是布爾類型的開(kāi)關(guān)，默認(rèn)值都為 false。

capture：等價(jià)于以前的 useCapture 參數(shù)；
once：就是表明該監(jiān)聽(tīng)器是一次性的，執(zhí)行一次后就被自動(dòng) removeEventListener 掉；
passive：用于webapp的touch事件

以上就是如何解決webapp頁(yè)面滾動(dòng)卡頓問(wèn)題，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

新聞名稱：如何解決webapp頁(yè)面滾動(dòng)卡頓問(wèn)題
當(dāng)前路徑：http://jinyejixie.com/article30/pshpso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站導(dǎo)航、標(biāo)簽優(yōu)化、App開(kāi)發(fā)、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)