[筆記] 解決 Google Chrome 的 Added non-passive event listener to a scroll-blocking event 錯誤

章節連結

Google Chrome 在 51 版後,為了提昇效能,對 mousewheel, touch 事件兩種監聽器多新增了一個 { passive: true } 參數。由於非所有瀏覽器的支援,解決之道要馬忽略這個警告,或是安裝 Default Passive Events 套件。不過 Default Passive Events 也有機會和其他的套件衝突,所以這邊提供另外一種方式。

web designer


內容

1. [ NPM 套件 ]:Default Passive Events

2. 自行函式撰寫

將原生的 addEventListener 方法給改寫,保留原有的內容,並針對第三個傳入值進行判斷。由於是針對原生方法做改動,因此在引入的順序上,能盡可能的越提前越好。


參考資料

1. default-passive-events
2. addEventListener 的第三個參數
3. 关于Added non-passive event listener to a scroll-blocking ‘wheel’ event. Consider marking event handler as ‘passive’ to make the page more responsive.的新解决方案
4. Added non-passive event listener to a scroll-blocking ‘touchstart’ event

按讚加入粉絲團

延伸閱讀