IOS繫結touchend事件失效

是小小白啊發表於2018-06-08

Unable to preventDefault inside passive event listener due to target being treated as passive.

不止是iOS,chrome等瀏覽器均存在類似問題,原因在於其在實現時的一點小改動: 瀏覽器只有在執行事件處理函式後才能知道有沒有觸發preventDefault,故頁面會有延遲。為了解決這種延遲,從而讓頁面滾動的效果如絲般順滑,從 chrome56 開始,在 window、document 和 body 上註冊的 touchstart 和 touchmove 事件處理函式,會預設為是 passive: true。瀏覽器忽略 preventDefault() 就可以第一時間滾動了。
但這樣的後果是,如果在以上這 3 個元素的 touchstart 和 touchmove 事件處理函式中呼叫 e.preventDefault() ,會被瀏覽器忽略掉,並不會阻止預設行為。

解決辦法一:css touch-action: none;
解決辦法二:註冊處理函式時,用如下方式,明確宣告為不是被動的 window.addEventListener('touchmove', func, { passive: false })

相關文章