摘要：手机浏览器在滚动当前页面还可能是缩放页面时，由于默认行为被阻止，导致页面被迫静止，导致用户使用体验差，感觉滚动页面有停顿感。具体一点的解释由于事件对象的属性为，也就是说它的默认行为可以被监听器通过方法阻止。
手机浏览器在滚动当前页面（还可能是缩放页面）时，由于默认行为被阻止，导致页面被迫静止，导致用户使用体验差，感觉滚动页面有停顿感。
具体一点的解释：由于 touchstart 事件对象的 cancelable 属性为 true，也就是说它的默认行为可以被监听器通过 preventDefault() 方法阻止。但浏览器无法预先知道一个监听器会不会调用 preventDefault()，它能做的只有等监听器执行完后再去执行默认行为，而监听器执行是要耗时的，有些甚至耗时很明显，这样就会导致页面卡顿。即便监听器是个空函数，也会产生一定的卡顿，毕竟空函数的执行也会耗时。
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事件
据了解，在手机浏览器使用事件的时候，有 80% 的滚动事件监听器是不会阻止默认行为的，也就是说大部分情况下，浏览器是白等了。所以，passive 监听器诞生了，passive 的意思是“顺从的”，表示它不会对事件的默认行为说 no，浏览器知道了一个监听器是 passive 的，它就可以在两个线程里同时执行监听器中的 JavaScript 代码和浏览器的默认行为了。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/100404.html
摘要：动画卡顿解决方案前端时间用实现页面中首页动画过渡，很简单的一个效果，首页加载一个客服头像，先放大，停留后再缩小至顶部。参考文章深入浏览器理解和的性能问题解决动画卡顿的办法 CSS3 动画卡顿解决方案 前端时间用animation实现H5页面中首页动画过渡，很简单的一个效果，首页加载一个客服头像，先放大，停留700ms后再缩小至顶部。代码如下 ...
摘要：动画卡顿解决方案前端时间用实现页面中首页动画过渡，很简单的一个效果，首页加载一个客服头像，先放大，停留后再缩小至顶部。参考文章深入浏览器理解和的性能问题解决动画卡顿的办法 CSS3 动画卡顿解决方案 前端时间用animation实现H5页面中首页动画过渡，很简单的一个效果，首页加载一个客服头像，先放大，停留700ms后再缩小至顶部。代码如下 ...
摘要：但本活又己交给音长争标识我。八说前它特用达圆是路看江才。开次他争从点军容给油很出。成育料技所心并精北酸间办元。除现七团一历积动两水矿花始线党党她。 好快, 1分钟写好下拉刷新,滚动加载自动分页列表 前言 欢迎关注BUI Webapp专栏 或者 bui神速微信公众号. 以往文章: 2019开发最快的Webapp框架--BUI交互框架 微信Webapp开发的各种变态路由需求及解决办法! ...
阅读 2383·2023-04-25 19:47
阅读 3269·2019-08-29 17:18
阅读 763·2019-08-29 15:26
阅读 3276·2019-08-29 14:17
阅读 937·2019-08-26 13:49
阅读 3200·2019-08-26 13:22
阅读 2903·2019-08-26 10:44
阅读 2591·2019-08-23 16:51
