[Violation] Added non-passive event listener to a scroll-blocking <some> event.
Passive Event Listeners——讓頁面滑動更加流暢的新特性
Passive Event Listeners - 被動事件監聽器,在寫H5頁面的時候,Chrome 提醒。
報錯信息:
Vue控制台警告 :[Violation] Added non-passive event listener to a scroll-blocking event.
Consider marking event handler as ‘passive’ to make the page more responsive.
翻譯如下:
違反:沒有添加被動事件監聽器來阻止’touchstart’事件,請考慮添加事件管理者’passive’,以使頁面更加流暢。
這個是 Chrome51 版本以后,Chrome 增加了新的事件捕獲機制-Passive Event Listeners;
Passive Event Listeners:就是告訴前頁面內的事件監聽器內部是否會調用preventDefault函數來阻止事件的默認行為,
以便瀏覽器根據這個信息更好地做出決策來優化頁面性能。當屬性passive的值為true的時候,
代表該監聽器內部不會調用preventDefault函數來阻止默認滑動行為,
Chrome瀏覽器稱這類型的監聽器為被動(passive)監聽器。
目前Chrome主要利用該特性來優化頁面的滑動性能,
所以Passive Event Listeners特性當前僅支持mousewheel/touch相關事件。
解決辦法
npm i default-passive-events -S
main.js中加入:import ‘default-passive-events’