1. 程式人生 > >移動端頁面滑動時候警告:Unable to preventDefault inside passive event listener due to target being treated as passive.

移動端頁面滑動時候警告:Unable to preventDefault inside passive event listener due to target being treated as passive.

ted doc com cti 滾動 href 解決 docs css

移動端項目中,在滾動的時候,會報出以下提示:

[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 來阻止默認滑動行為。
target.addEventListener('touch', function () {

}, { passive: false });
  1. 在 CSS 中全局使用:
* { 
    touch-action: pan-y;  
}

touch-action 的使用方法見:https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action

參考:

https://juejin.im/post/5ad804c1f265da504547fe68

https://www.jianshu.com/p/04bf173826aa

移動端頁面滑動時候警告:Unable to preventDefault inside passive event listener due to target being treated as passive.