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

分享至：

   

关于我们

公司简介 发展历程

服务项目

高端网站建设 小程序开发 APP开发 网络营销

建站知识

网站建设 网站设计 网站制作 小程序

联系我们

公司地址 人才招聘

成都 重庆



电话：028-86922220



地址：成都市太升南路288号锦天国际A幢1002号



电话：028-86922220



地址：重庆市南岸区弹子石腾龙大道58号2栋21-6

版权所有：成都创新互联科技有限公司重庆分公司 渝ICP备2021005571号-4