如何解决webapp页面滚动卡顿问题-创新互联
本篇文章给大家分享的是有关如何解决webapp页面滚动卡顿问题,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
创新互联专注于企业营销型网站建设、网站重做改版、灌云网站定制设计、自适应品牌网站建设、H5页面制作、商城系统网站开发、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为灌云等各大城市提供网站开发制作服务。addEventListener的useCapture参数
基本概念:xxx.addEventListener('事件名', function(xxx){xxx}, useCapture).
第一个参数表示事件名称(不含 on,如 "click");第二个参数表示要接收事件处理的函数;第三个参数为 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);
根据上述代码来看这个 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页面滚动卡顿问题,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
文章名称:如何解决webapp页面滚动卡顿问题-创新互联
标题链接:http://ybzwz.com/article/cccppd.html