报错:[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>
场景:
使用了 addEventListener “touchmove”
解决办法:
添加 { passive: false }
bodyDom.addEventListener('touchmove',this.bodyMove,{ passive: false })
问题原因:
passive 的事件监听器
很久以前,addEventListener() 的参数约定是这样的:
addEventListener(type, listener, useCapture)
后来,最后一个参数,也就是控制监听器是在捕获阶段执行还是在冒泡阶段执行的 useCapture 参数,变成了可选参数(传 true 的情况太少了),成了:
addEventListener(type, listener[, useCapture ])
2017年底,DOM 规范做了修订:addEventListener() 的第三个参数可以是个对象值了,也就是说第三个参数现在可以是两种类型的值了:
addEventListener(type, listener[, useCapture ]) addEventListener(type, listener[, options ])
这个修订是为了扩展新的选项,从而自定义更多的行为,目前规范中 options 对象可用的属性有三个:
addEventListener(type, listener, { capture: false, passive: false, once: false })
Passive Event Listeners是Chrome提出的一个新的浏览器特性:Web开发者通过一个新的属性passive来告诉浏览器,当前页面内注册的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为,以便浏览器根据这个信息更好地做出决策来优化页面性能。当属性passive的值为true的时候,代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为,Chrome浏览器称这类型的监听器为被动(passive)监听器。目前Chrome主要利用该特性来优化页面的滑动性能,所以Passive Event Listeners特性当前仅支持mousewheel/touch相关事件。
从 chrome56 开始,在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数,会默认为是 passive: true。