1. 程式人生 > >mui執行滑動事件: Unable to preventDefault inside passive event listener

mui執行滑動事件: Unable to preventDefault inside passive event listener

開發者 滑動 www. 上拉加載 提前 阻止 下拉刷新 mui框架 延遲

使用MUI框架,在上拉加載和下拉刷新的時候會出現下面的異常:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

解決辦法:

  方法1)在touch的事件監聽方法上綁定第三個參數{ passive: false },

  通過傳遞 passive 為 false 來明確告訴瀏覽器:事件處理程序調用 preventDefault 來阻止默認滑動行為。

  

elem.addEventListener(
  ‘touchstart‘,
  fn,
  { passive: false }
);

  方法2):

  

 * { touch-action: pan-y; } 
 使用全局樣式樣式去掉

在 Android 版 Chrome 瀏覽器的 touch 事件監聽器的頁面中,80% 的頁面都不會調用 preventDefault 函數來阻止事件的默認行為。在滑動流暢度上,有 10% 的頁面增加至少 100ms 的延遲,1% 的頁面甚至增加 500ms 以上的延遲。

由於瀏覽器無法預先知道一個事件處理函數中會不會調用 preventDefault(),它需要等到事件處理函數執行完後,才能去執行默認行為,然而事件處理函數執行是要耗時的,這樣一來就會導致頁面卡頓,也就是說,當瀏覽器等待執行事件的默認行為時,大部分情況是白等了。

如果 Web 開發者能夠提前告訴瀏覽器:“我不調用 preventDefault 函數來阻止事件事件行為”,那麽瀏覽器就能快速生成事件,從而提升頁面性能,Passive event listeners 的提出就解決了這樣的問題。

mui執行滑動事件: Unable to preventDefault inside passive event listener