阻止默认行为是配合passive使用
在使用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使用的更多相关文章
- 事件修饰符 阻止冒泡 .stop 阻止默认事件 .prevent
stop修饰符 阻止冒泡行为 可以在函数中利用$event传参通过stopPropagation()阻止冒泡 通过直接在元素中的指令中添加 .stop prevent修饰符 阻止默认行为 可以在函数中 ...
- Web:移动端阻止默认行为的小坑
问题 移动端 web 开发中,使用 addEventListener 阻止了 touchstart 事件的默认行为却发现没有生效 描述 再移动端 web 开发中,我们一般会用 addEventList ...
- 阻止默认事件event.preventDefault();
阻止浏览器默认事件.什么是默认事件,例如浏览器默认右键菜单.a标签默认连接跳转...,如何阻止呢? Firefox中,event必须作为参数传入. IE中,event是window对象的属性. ev ...
- 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return fal的区别
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...
- s事件之event.preventDefault()与event.stopPropagation()的阻止默认事件和阻止事件冒泡的用法
event.preventDefault()用法介绍 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "submit" ...
- jQuery阻止默认行为和阻止冒泡
1.阻止默认行为:通常是值一个标签的默认行为,如button的提交表单,a标签的跳转等. 那如何阻止标签的默认行为? 1)return false 2) e.preventDefault(); < ...
- 锋利的jQuery-4--阻止事件冒泡和阻止默认行为
阻止事件冒泡: 如果嵌套元素分别有自己的click事件,当点击内层元素时外层元素的事件也会被触发. $("span").bind("click", functi ...
- js之阻止事件冒泡(待修改)和阻止默认事件
阻止默认事件(event.stopPropagation()): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
- jQuery中的阻止默认行为
在很多元素中都存在默认行为,例如表单中的submit按钮,a标签等等.如果想要消除其中的默认行为,就需要一个事件event的方法来消除他们的默认行为. 这个方法就是event.preventDefau ...
随机推荐
- Hero In Maze
Hero In Maze 时间限制(普通/Java):1000MS/10000MS 执行内存限制:65536KByte 描写叙述 500年前,Jesse是我国最卓越的剑客. 他英俊潇 ...
- 火焰灯menu修改之后,可以实现数遍点击小方块停留在当前页面
下载地址:http://www.cnblogs.com/RightDear/admin/Files.aspx 调用方式,传入一个参数 首页传入0,关于联盟传入1,产品展示传入2,依此类推 <sc ...
- python day- 7 进本数据类型的先关知识点 set集合 深浅拷贝
一.基本数据类型相关知识 1.str. join()函数 关于字符串 a = "我爱北京" b = a.join("真的") 将&q ...
- luogu3384 【模板】 树链剖分
题目大意 已知一棵包含N个结点的树(连通且无环),每个节点上包含一个数值,需要支持以下操作:操作1: 格式: 1 x y z 表示将树从x到y结点最短路径上所有节点的值都加上z操作2: 格式: 2 x ...
- HDU 6118 度度熊的交易计划 【最小费用最大流】 (2017"百度之星"程序设计大赛 - 初赛(B))
度度熊的交易计划 Time Limit: 12000/6000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- DDD领域建模基本流程
整理一个精简的DDD领域建模基本流程,供大家在DDD领域建模实践中进行参考. 搜集用户故事(用户的原始需求) 整理用户故事,抽出用例(用例表达了用户对系统的需求,定义了系统的边界以及系统外部角色和系统 ...
- p1199八数码问题
oj上简化的八数码问题,最强的数据仅仅是20步: 根据曼哈顿距离构造启发函数: 主算法:IDA*:(使用方法好像不太对......) 未用位运算优化: #include<iostream> ...
- CSS:清除浮动
周五去听css样式的培训,讲到float导致div不能被撑开的问题,特记录如下: 在写HTML代码的时候,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部 ...
- 创建app前的环境配置/AppIcon/启动图片
1.真机调试http://blog.csdn.net/tht2009/article/details/48580569 2.创建app前的环境配置
- 洛谷P1113杂物——DP
题目:https://www.luogu.org/problemnew/show/P1113 每个任务的时间就是准备工作中完成最晚的那个的时间再加上自己的时间. 代码如下: #include<i ...