阻止默认行为是配合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

转载于:https://www.cnblogs.com/lydialee/p/9067273.html

阻止默认行为是配合passive使用相关推荐

阻止默认事件，浏览器滚动回弹，
document.body.addEventListener('touchmove', function (e) {e.preventDefault() // 阻止默认的事件 }, {passive: ...
Event事件-1:addEventListener事件监听 / 事件冒泡事件捕获 / 事件委托 / preventDefault 阻止默认行为 / cancelBubble、stopPropa...
addEventListener 事件监听器 target.addEventListener(type, listener[, options|useCapture]) 添加事件监听参数: ...
ajax 阻止默认提交,jQuery验证插件：在对ajax调用servlet时，submitHandler不会阻止默认提交-返回false无效...
我有一个使用jquery和servlet的简单表单.jQuery对Servlet进行Ajax调用,然后Servlet进行一些服务器端计算,然后通过jQuery在同一页面上显示结果.我不希望表单进行默认 ...
javascript, jQuery阻止默认事件和冒泡事件
事件冒泡(event bubbling) 事件冒泡是指一个元素上的事件被触发,然后这个事件按嵌套顺序在父级元素上触发,直至document根节点. 例如: <!DOCTYPE html> ...
带你学习JQuery：事件冒泡和阻止默认行为
首先说什么是冒泡呢,简单的意思就是,你本来想只触发一个时间,但是实际上却出发了N个事件. 举例来说,有一个元素,如Span,你绑定了一个Click函数,你又为Div绑定了一个Click函数,而这个Sp ...
Vue的阻止冒泡与阻止默认
方法 1)函数内部阻止事件冒泡 e.cancelBubble=true; 2)标签内阻止事件冒泡 @click.stop="show1()" 说明 1.event.stop ...
50 jQuery绑定事件阻止默认事件发生内置动画 each data
主要内容 1 阻止后续事件继续执行 return false: 常用于表单提交 event.preventDefault : 阻止默认事件发生 <body> <form acti ...
jQuery之防止【冒泡事件】，阻止默认行为【return false】 event.stopPropagation event.preventDefault...
知识点: event.stopPropagation() 阻止冒泡 event.preventDefault() 阻止默认事件,比如button提交后跳转到链接页面两者都可以用 return ...
javascript的阻止默认事件和阻止冒泡事件
这两个方面的知识,在妙味课堂中有听过,再次复习一下: 原文来自:[http://www.cnblogs.com/Essence/p/4266618.html] 事件冒泡与默认行为在说事件冒泡之前,我 ...

阻止默认行为是配合passive使用

阻止默认行为是配合passive使用相关推荐

最新文章

热门文章