[Violation] Added non-passive event listener to a scroll-blocking <某些> 事件. Consider marking event handler as 'passive' to make the page more responsive. See <URL> 解决办法

今天在网页控制台看到了这个警告

[Violation] Added non-passive event listener to a scroll-blocking <某些> 事件. Consider marking event handler as 'passive' to make the page more responsive. See

然后我发现是一款浏览器叫“沉浸式翻译 - 网页翻译插件 | PDF翻译 | 免费”翻译插件引起的，于是我查找了一下资料。首先这句报错的意思是，为了不影响滑动页面时的堵塞，请设置
addEventListener(type, listener，{ passive:true});

mdn文档是这样介绍passive的

• passive 可选
  一个布尔值，设置为 true 时，表示 listener 永远不会调用 preventDefault()。如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。查看使用 passive 改善滚屏性能以了解更多。

可见passive主要用来屏蔽preventDefault()，如果代码中有还会触发一个警告，可能是preventDefault，妨碍了页面滚动， 页面滚动依赖的事件有touchstart和touchmove， 这下真相大白了。

是因为touchstart和touchmove的默认行为被阻止，如果某个div上这样做了，
用户手指在上面开始滚动页面就会失败，所以从chrome 51开始对开发者建议，使用passive屏蔽touchstart和touchmove事件的preventDefault()

  const a = document.querySelector('.div')

    a.addEventListener("touchstart",(e)=>{
     
    },{
        passive:true
    })

    a.addEventListener("touchmove",(e)=>{
  
    },{
        passive:true
    })

加了passive:true后， 还有用e.preventDefault()， 控制台就会报一个错误， 这时就知道加了不该加的语句，去代码中把 e.preventDefault()删除即可