Fork me on GitHub

判断addEventListener是否支持passive属性

写法

先看一下 MDN 现在 addEventListener 的写法,传参变成了这样:

1
target.addEventListener(type, listener, { capture: Boolean, passive: Boolean, once: Boolean })

以前第三个参数是一个 Boolean 值,它决定是否为捕获模式,现在可以传入一个对象了

  • capture: 同以前一样,表示 listener 是在捕获阶段执行还是冒泡阶段执行
  • passive: 表示 listener 永远不会调用 preventDefault()。
  • once: 表示 listener 只会调用一次。

用处

看上去懵懵的,其实,总结一下就是 passive 主要是为了优化滑动性能而生,当 passive 设置为 true 时,会告诉浏览器你的 listener 中不会调用 preventDefault() 这个方法,从而浏览器会做一系列优化来提升滑动体验,从而使滑动更顺畅

什么时候使用它

当你的 listener 中不会调用 preventDefault() 方法时,都尽量使用它,如果你设置了 passivetrue 并且你代码中还调用了 preventDefault() 方法,那么浏览器会抛出一个错误

不兼容怎么办

这个属性出来的比较晚,兼容性不太好,怎么检测浏览器是否支持该属性呢?这里有个方法

1
2
3
4
5
6
7
8
9
10
11
var passiveSupported = false

try {
var options = Object.defineProperty({}, 'passive', {
get: function() {
passiveSupported = true
}
})

window.addEventListener('test', null, options)
} catch (err) {}

当浏览器支持该属性时 passiveSupported 会被赋值为 true,这段代码简直是酷到没朋友 👽