Bootstrap

Unable to preventDefault inside passive event listener due to target being treated as passive 报错

报错:[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。

 

 

;