Unable to preventDefault inside passive event listener due to target being treated as passive. => touch 問題


在使用 fastclick 並且在 chrome上 做 touch 時經常看到控制台信息:

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

從 chrome56 開始,在 window、document 和 body 上注冊的 touchstart 和 touchmove 事件處理函數,會默認 passive: true。瀏覽器忽略 preventDefault() 就可以第一時間滾動。

所以,注冊處理函數時,明確聲明為不是被動的

window.addEventListener('touchmove', func, { passive: false }

或者,

 touch-action: none; 

使用以上兩種方式解決。

 

更多詳情請參考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM