在使用lighthouse检测pwa应用时,发现提示下面有下面的警告

默认使用passive:true提高滚动性能并减少崩溃,passive即顺从的,是指它顺从浏览器的默认行为。设置该属性的目的主要是为了在阻止事件默认行为导致的卡顿。一般我们写阻止默认行为的代码如下:

ele.addEventListener('touchmove', function (e) { e.preventDefault();});

//如果我们是为了阻止页面滚动添加了上述代码,默认行为就是滚动页面,但是如果我们阻止了这一默认行为,浏览器是无法预先知道的,必须等待事件监听器执行完成后,才知道要去阻止默认行为。等待监听器的执行是耗时的,,有些甚至耗时很明显,这样就会导致页面卡顿。即便监听器是个空函数,也会产生一定的卡顿,毕竟空函数的执行也会耗时。所以就有了passive属性,如果要阻止默认事件可以设置passive:false,
//阻止事件的默认行为时,

document.body.addEventListener('touchmove', function (e) {
e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
}, {passive: false}); //passive 参数不能省略,用来兼容ios和android

//如果设置了passive为true,同时又阻止默认行为,阻止是不生效的

document.addEventListener("touchmove", function(event) {
event.preventDefault() //不产生作用
}, {
passive: true
})

详细请参考:https://www.cnblogs.com/ziyunfei/p/5545439.html

阻止默认行为是配合passive使用的更多相关文章

  1. 事件修饰符 阻止冒泡 .stop 阻止默认事件 .prevent

    stop修饰符 阻止冒泡行为 可以在函数中利用$event传参通过stopPropagation()阻止冒泡 通过直接在元素中的指令中添加 .stop prevent修饰符 阻止默认行为 可以在函数中 ...

  2. Web:移动端阻止默认行为的小坑

    问题 移动端 web 开发中,使用 addEventListener 阻止了 touchstart 事件的默认行为却发现没有生效 描述 再移动端 web 开发中,我们一般会用 addEventList ...

  3. 阻止默认事件event.preventDefault();

    阻止浏览器默认事件.什么是默认事件,例如浏览器默认右键菜单.a标签默认连接跳转...,如何阻止呢? Firefox中,event必须作为参数传入.  IE中,event是window对象的属性. ev ...

  4. 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return fal的区别

    今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...

  5. s事件之event.preventDefault()与event.stopPropagation()的阻止默认事件和阻止事件冒泡的用法

    event.preventDefault()用法介绍 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "submit" ...

  6. jQuery阻止默认行为和阻止冒泡

    1.阻止默认行为:通常是值一个标签的默认行为,如button的提交表单,a标签的跳转等. 那如何阻止标签的默认行为? 1)return false 2) e.preventDefault(); < ...

  7. 锋利的jQuery-4--阻止事件冒泡和阻止默认行为

    阻止事件冒泡: 如果嵌套元素分别有自己的click事件,当点击内层元素时外层元素的事件也会被触发. $("span").bind("click", functi ...

  8. js之阻止事件冒泡(待修改)和阻止默认事件

    阻止默认事件(event.stopPropagation()): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  9. jQuery中的阻止默认行为

    在很多元素中都存在默认行为,例如表单中的submit按钮,a标签等等.如果想要消除其中的默认行为,就需要一个事件event的方法来消除他们的默认行为. 这个方法就是event.preventDefau ...

随机推荐

  1. 基础才是重中之重~用好configSections让配置信息更规范

    对于小型项目来说,配置信息可以通过appSettings进行配置,而如果配置信息太多,appSettings显得有些乱,而且在开发人员调用时,也不够友好,节点名称很容易写错,这时,我们有几种解决方案 ...

  2. CentOS笔记-用户和用户组管理

    Linux系统是一个多用户多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申请一个账号,然后以这个账号的身份进入系统. 1.添加新的用户账号使用useradd命令,其语法如下 ...

  3. Axure Base 07 元件使用思路的补充

    我们曾经对axure线框图基本元件进行过说明,现结合这我对这些元件的使用习惯,对部分元件的使用,再做一些补充. 1. 图片:可以编辑悬停.按下时候显示不同的图片,做图片的一些特殊效果. 2. 文本(l ...

  4. jQuery 工具函数

    jQuery工具函数 一.$.browser对象属性 属性列表 说明 webkit webkit相关浏览器则返回true,否则返回false,如google,傲游. mozilla mozilla相关 ...

  5. luogu2704 炮兵阵地 状态压缩DP

    题目大意:一个N*M的地图由N行M列组成,地图的每一格可能是山地(用“H” 表示),也可能是平原(用“P”表示),在每一格平原地形上最多可以布置一支炮兵部队,能攻击到的区域:沿横向左右各两格,沿纵向上 ...

  6. ERROR: cannot start Android Studio. No JDK found. Please validate either ANDROID_STUDIO_JDK, JDK_HOME + Unrecognized VM option '+UseCodeCacheFlushing

    想学下android,在本来想用myeclipse安装下sdk和adt,谁知在官网看到http://developer.android.com/sdk/index.html Google I/O 20 ...

  7. bzoj3462: DZY Loves Math II

    状态很差脑子不清醒了,柿子一直在推错.... ... 不难发现这个题实际上是一个完全背包 问题在于n太大了,相应的有质数的数量不会超过7个 假设要求sigema(1~plen)i pi*ci=n 的方 ...

  8. android TextView 设置部分文字背景色 和 文字颜色

    通过SpannableStringBuilder来实现,它就像html里边的元素改变指定文字的文字颜色或背景色 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...

  9. lucene 5的测试程序——API变动太大

    package hello; import java.io.BufferedReader; import java.io.File; import java.io.FileReader; import ...

  10. skynet实践(8)-接入websocket

    我从开源项目(https://github.com/lipp/lua-websockets,这里我们简称LWS)中抽出了websocket的部分处理,步骤如下: 1)首先是解决LWS的几个依赖问题.L ...