判断 addEventListener 是否支持 passive 属性

Dec 3, 20182 min read

此文最后修改于 1907 天前,可能包含很多不再适用的废话,阅读需谨慎~

写法

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

JS

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

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

用处

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

使用场景

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

兼容性

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

JS

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

浏览量

最后修改于

Dec 3, 2018
Made withbyXiaojun