Unable to preventDefault inside passive event list

魏憲會發布于2019-08-21 15:19 / 681人閱讀

摘要：最近做項目經常在的控制臺看到如下提示于是了一番，找到這篇文章，有了詳細解釋。簡而言之由于瀏覽器必須要在執行事件處理函數之后，才能知道有沒有掉用過，這就導致了瀏覽器不能及時響應滾動，略有延遲。

最近做項目經常在 chrome 的控制臺看到如下提示：

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

于是 Google 了一番，找到這篇文章，有了詳細解釋。Making touch scrolling fast by default

簡而言之：

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

所以為了讓頁面滾動的效果如絲般順滑，從 chrome56 開始，在 window、document 和 body 上注冊的 touchstart 和 touchmove 事件處理函數，會默認為是 passive: true。瀏覽器忽略 preventDefault() 就可以第一時間滾動了。

舉例：
wnidow.addEventListener("touchmove", func) 效果和下面一句一樣
wnidow.addEventListener("touchmove", func, { passive: true })

這就導致了一個問題：

如果在以上這 3 個元素的 touchstart 和 touchmove 事件處理函數中調用 e.preventDefault() ，會被瀏覽器忽略掉，并不會阻止默認行為。

測試：

body {
  margin: 0;
  height: 2000px;
  background: linear-gradient(to bottom, red, green);
}

// 在 chrome56 中，照樣滾動，而且控制臺會有提示，blablabla
window.addEventListener("touchmove", e => e.preventDefault())

那么如何解決這個問題呢？不讓控制臺提示，而且 preventDefault() 有效果呢？
兩個方案：
1、注冊處理函數時，用如下方式，明確聲明為不是被動的
window.addEventListener("touchmove", func, { passive: false })

2、應用 CSS 屬性 touch-action: none; 這樣任何觸摸事件都不會產生默認行為，但是 touch 事件照樣觸發。
touch-action 還有很多選項，詳細請參考touch-action

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

GPU云服務器云服務器 unable to locate inside preventDefault passive

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88154.html

一次拖拽功能引發的思考

摘要：最近做了一個物體可拖拽的需求，由于在手機上的支持性不是很好，就利用了系列事件，改變的進行位移，從而達到物體跟隨手指移動的效果。但是發現了有以下提示雖然最終找到了原因是升級版本具體提給了，但是卻讓我陷入了思考。最近做了一個物體可拖拽的需求，由于drag-and-drop在手機上的支持性不是很好，就利用了touch系列事件，改變transform的translate進行位移，從而達到物體...

lastSeries 2019-08-26 10:14 評論0 收藏0
chrome 監聽touch類事件報錯：無法被動偵聽事件preventDefault

摘要：先上錯誤信息一個簡單的頁面只有這么段報的一個好錯誤，真是日了狗了，一直這么寫的代碼，什么情況原來，是新版，給這個返回了，不再是清除瀏覽器默認行為了。先上錯誤信息： Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www....

sixleaves 2019-08-22 10:43 評論0 收藏0
移動端頁面小bug

摘要：滑動時頁面警告解決方法不支持的解決辦法姓名身份證號碼重點在于給設置高度和偽元素微信去掉底部返回橫條問題框自動填充內容背景顏色為黃色設置文字不居中設置間距和等值即可滑動時頁面警告 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as pas...

winterdawn 2019-08-02 16:11 評論0 收藏0
移動端頁面小bug

摘要：滑動時頁面警告解決方法不支持的解決辦法姓名身份證號碼重點在于給設置高度和偽元素微信去掉底部返回橫條問題框自動填充內容背景顏色為黃色設置文字不居中設置間距和等值即可滑動時頁面警告 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as pas...

youkede 2019-08-30 15:43 評論0 收藏0