使用MUI遇到的坑: nable to preventDefault inside passive event listener

在使用mui的scroll組件的時候,需要導入mui的js文件,執行以下代碼初始化組件:

//導入mui的js文件
import mui from '../../lib/mui/js/mui.min.js'
//初始化滑動控件
mui('.mui-scroll-wrapper').scroll({
	deceleration: 0.0005 
});

但是,當加入這幾行代碼之後,在瀏覽器對頁面進行操作,就會報這個錯誤:

mui.min.js:2984 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.

那麼,既然讓我see這個網址,那就去看一下
這個鏈接跳轉到了一個chrome特性.

eventListener 的 passive 屬性

瀏覽器在獲取用戶事件的時候,是先執行監聽器的回調任務,然後再執行默認事件的,因爲在回調中,有可能會阻止默認事件的行爲,如果是先執行默認事件再執行回調,那麼回調中的preventDefault就會失去作用.但是這樣一來就帶來了問題.因爲回調操作是耗時的,要等回調處理完再執行默認事件可能會造成界面的不流暢.例如(scroll的時候,先執行默認行爲就會讓界面更加跟手).因此就產生了passive這個屬性.它在添加監聽器的時候被傳入,可以理解爲一個標記,告訴瀏覽器這個回調函數中有沒有preventDefault.如果爲true,就會先執行默認行爲,在回調函數中阻止默認行爲將會失效,如果passive爲false,就會先執行回調,如果回調中阻止了默認行爲,那麼默認行爲不會執行.

passive屬性在54版本的chrome被加入,默認值爲false,這沒有什麼毛病.但是到了56版本之後,默認值變成了true.這就導致如果在回調函數中preventDefault就會出現問題.

踩坑原因

所以這個問題出現的原因很簡單,就是因爲,mui沒有兼容這個chrome的新特性,所以我們只需要找到源碼中設置監聽器的語句,然後加入參數,設置passive爲false就ok了

解決辦法

如果是本地導入js文件, 那麼打開mui.min.js.在文件中搜索如下語句:

f)break}}),b.addEventListener("click"

改成:

f)break}},{passive:false}),b.addEventListener("click"

然後重新運行項目,問題解決.