[vue問題解決] chrome瀏覽器Unable to preventDefault inside passive event listener due to target being treated as passive.


解釋

是chrome為了提高頁面的滑動流暢度而新折騰出來的一個東西

由於瀏覽器必須要在執行事件處理函數之后,才能知道有沒有掉用過 preventDefault() ,這就導致了瀏覽器不能及時響應滾動,略有延遲。

所以為了讓頁面滾動的效果如絲般順滑,從 chrome56 開始,在 window、document 和 body 上注冊的 touchstart 和 touchmove 事件處理函數,會默認為是 passive: true。

瀏覽器忽略 preventDefault() 就可以第一時間滾動了。

解決

方案1、注冊處理函數時,用如下方式,明確聲明為不是被動的

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

方案2、應用 CSS 屬性 touch-action: none; 這樣任何觸摸事件都不會產生默認行為,但是 touch 事件照樣觸發。例 使用全局樣式樣式去掉默認行為

 * { touch-action: none; }   

補充:

touch-action也可取一下值
none:當觸控事件發生在元素上時,不進行任何操作。因此使用none無法觸摸
pan-x:啟用單指水平平移手勢。可以與 pan-y 、pan-up、pan-down 和/或 pinch-zoom 組合使用。
pan-y:啟用單指垂直平移手勢。可以與 pan-x 、pan-left 、pan-right 和/或 pinch-zoom 組合使用。

[注]未來可能所有的元素的 touchstart touchmove 事件處理函數都會默認為 passive: true


免責聲明!

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



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