滑动警告：Unable to preventDefault inside passive event listener

问题描述

在项目上看到 chrome 的控制台看到如下提示：

Unable to preventDefault inside passive event listener due to target
being treated as passive. See xxxx…

翻译过来就是：不能给passive(被动的)事件监听器preventDefault，因为它被认为是passive。

事实证明 Chrome 和Firefox 都会有此警告。

问题探究

下面我们来了解一下passive和preventDefault
很久以前，addEventListener() 的参数约定是这样的：

addEventListener(type, listener, useCapture)

后来，最后一个参数，也就是控制监听器是在捕获阶段执行还是在冒泡阶段执行的 useCapture 参数，变成了可选参数（传 true 的情况太少了），成了：

addEventListener(type, listener[, useCapture ])

去年年底，DOM 规范做了修订：addEventListener() 的第三个参数可以是个对象值了，也就是说第三个参数现在可以是两种类型的值了：

addEventListener(type, listener[, useCapture ])
addEventListener(type, listener[, options ])

这个修订是为了扩展新的选项，从而自定义更多的行为，目前规范中 options 对象可用的属性有三个：

addEventListener(type, listener, {
    capture: false,
    passive: false,
    once: false
})

三个属性都是布尔类型的开关，默认值都为 false。其中 capture 属性等价于以前的 useCapture 参数；once 属性就是表明该监听器是一次性的，执行一次后就被自动 removeEventListener 掉，还没有浏览器实现它；passive 属性是本文的主角，Firefox 和 Chrome 已经实现，先看个 Chrome 官方的视频介绍：

视频介绍

从视频中可以看到，默认行为可以被监听器通过 preventDefault() 方法阻止，那它的默认行为是什么呢，通常来说就是滚动当前页面（还可能是缩放页面），如果它的默认行为被阻止了，页面就必须静止不动。但浏览器无法预先知道一个监听器会不会调用 preventDefault()，它能做的只有等监听器执行完后再去执行默认行为，而监听器执行是要耗时的，有些甚至耗时很明显，这样就会导致页面卡顿。视频里也说了，即便监听器是个空函数，也会产生一定的卡顿，毕竟空函数的执行也会耗时。

视频里还说了，有 80% 的滚动事件监听器是不会阻止默认行为的，也就是说大部分情况下，浏览器是白等了。所以，passive 监听器诞生了，passive 的意思是“顺从的”，表示它不会对事件的默认行为说 no，浏览器知道了一个监听器是 passive 的，它就可以在两个线程里同时执行监听器中的 JavaScript 代码和浏览器的默认行为了。

也就是说，我们可以通过传递 passive 为 true 来明确告诉浏览器，事件处理程序不会调用 preventDefault 来阻止默认滑动行为。这样在执行触摸事件之前就能知道是否需要阻止默认方法，而不用等到事件执行完成之后，然而事件处理函数执行是要耗时的，这样一来就会导致页面卡顿。

问题解决

假如有人不小心在 passive 的监听器里调用了 preventDefault()，也无妨，因为 preventDefault() 不会产生任何效果。

再回到前面的问题，一般情况不会用到preventDefault方法来阻止默认方法，如果不会用到的话就将这个调用去掉吧。。

如果必须要调用preventDefault 方法来阻止默认方法的话，
那么可以通过以下方式来修改：
1、注册处理函数时，用如下方式，明确声明为不是被动的

window.addEventListener('touchmove', func, { passive: false })

2、应用 CSS 属性 touch-action: none; 这样任何触摸事件都不会产生默认行为，但是 touch 事件照样触发。touch-action 还有很多选项，详细请参考touch-action.

[注]未来可能所有的元素的 touchstart touchmove 事件处理函数都会默认为 passive: true

passive 不能保证什么

passive 监听器能保证的只有一点，那就是调用 preventDefault() 无效，至于浏览器对默认行为卡顿的优化，那是浏览器的事情，是在规范要求之外的。鉴于这个新特性本来就是为解决滚动和触摸事件的卡顿而发明的，目前 Chrome 和 Firefox 支持优化的事件类型也仅限这类事件，比如 touchstart，touchmove，wheel 等事件。