如何解决webapp页面滚动卡顿问题-创新互联

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);

根据上述代码来看这个 useCapture 为 true 和 false的作用效果：

全为 false 时，触发顺序为：level3、level2、level1
全为 true 时，触发顺序为：level1、level2、level3
level1为 true，其他为 false 时，触发顺序为：level1、level3、level2
level2为 true，其他为 false 时，触发顺序为：level2、level3、level1
level3为 true，其他为 false 时，触发顺序为：level3、level2、level1
level1为 false，其他为 true时，触发顺序为：level2、level3、level1
level2为 false，其他为 true时，触发顺序为：level1、level3、level2
level3为 false，其他为 true时，触发顺序为：level1、level2、level3

由上述结果得出如下结论：

true 的触发顺序总是在 false 之前；
如果多个均为 true，则外层的触发先于内层；
如果多个均为 false，则内层的触发先于外层。

passive属性来控制事件行为

使用方式如下

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

三个属性都是布尔类型的开关，默认值都为 false。

capture：等价于以前的 useCapture 参数；
once：就是表明该监听器是一次性的，执行一次后就被自动 removeEventListener 掉；
passive：用于webapp的touch事件

以上就是如何解决webapp页面滚动卡顿问题，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。