OTT 前端技术

移动端滑动性能优化preventDefault

1. 背景介绍

```
  很久以前 addEventListener(type, listener, useCapture)是这样的;
  后来 addEventListener(type, listener[, useCapture ])变成这样 第三个参数变成了可选参数 默认false

  现在 addEventListener(type, listener[, useCapture ])
      addEventListener(type, listener[, options ])
  也就是说第三个参数现在可以是两种类型的值了
  options 有三个可选参数 默认都为false
  addEventListener(type, listener, {
    capture: false, //是否在事件捕获阶段执行
    once: false, // 事件只执行一次
    passive: false // 是否顺从浏览器默认操作
  })

```

2. 移动端touch事件

当你监听touchstart事件时候，浏览器不知道这里会不会有e.preventDefault() 故会执行期间增加判断，可能导致页面卡顿，通过passive提前通知浏览器(80%的页面是不需要阻止的)

  div.addEventListener("touchstart", function(e){
      ... // 浏览器不知道这里会不会有 e.preventDefault()增加判断
  })
  // 提前告诉浏览器 不会执行e.preventDefault()
  div.addEventListener("touchstart", function(e){ ... }, {passive: true})

3. 注意

当你给passive: true标识时 再执行 e.preventDefault() 是无效的