详解webapp页面滚动卡顿的解决办法html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法

手机浏览器在滚动当前页面（还可能是缩放页面）时，由于默认行为被阻止，导致页面被迫静止，导致用户使用体验差，感觉滚动页面有停顿感。

具体一点的解释：由于 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 代码和浏览器的默认行为了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！