工作中使用addEventListener監聽scroll、touchstart、touchmove、touchend遇到的問題

這兩天在工作中遇到了許多bug，有一些沒來得及總結。今天總結一下使用addEventListener監聽事件出現的問題

項目是用vue來做的，首先在mounted函數里面使用：window.addEventListener('scroll', this.pageScroll);

然后就是pageScroll()方法的一頓操作，最常用到的就是獲取頁面滾動距離

let top=document.documentElement.scrollTop||document.body.scrollTop;

然后在各種操作之下就出現了：

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

這樣的報錯。

上網找了解決方法，大部分的解決方案都是以下兩種：

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

* { touch-action:none; }

第一種方法passive在移動端滑動處理默認值為true，瀏覽器忽略preventDefault()

第二種方法touch-action是css中的一個屬性，用於設置觸摸屏用戶如何操縱元素的區域（例如瀏覽器內置的縮放功能）

主要有以下這些值

/* Keyword values */
touch-action: auto;//當觸控事件發生在元素上時，由瀏覽器來決定進行哪些操作，比如對viewport進行平滑、縮放等。
touch-action: none;//當觸控事件發生在元素上時，不進行任何操作。
touch-action: pan-x;//啟用單指水平平移手勢。可以與 pan-y 、pan-up、pan-down 和／或 pinch-zoom 組合使用。
touch-action: pan-y;//啟用單指垂直平移手勢。可以與 pan-x 、pan-left 、pan-right 和／或 pinch-zoom 組合使用。
touch-action: pinch-zoom;//啟用多手指平移和縮放頁面。 這可以與任何平移值組合。
touch-action: manipulation;//瀏覽器只允許進行滾動和持續縮放操作。任何其它被auto值支持的行為不被支持。啟用平移和縮小縮放手勢，但禁用其他非標准手勢，例如雙擊以進行縮放。 禁用雙擊可縮放功能可減少瀏覽器在用戶點擊屏幕時延遲生成點擊事件的需要。 這是“pan-x pan-y pinch-zoom”（為了兼容性本身仍然有效）的別名。
touch-action:pan-left, pan-right,pan-up,pan-down;//啟用以指定方向滾動開始的單指手勢。 一旦滾動開始，方向可能仍然相反。 請注意，滾動“向上”（pan-up）意味着用戶正在將其手指向下拖動到屏幕表面上，同樣 pan-left 表示用戶將其手指向右拖動。 多個方向可以組合，除非有更簡單的表示（例如，“pan-left pan-right”無效，因為“pan-x”更簡單，而“pan-left pan-down”有效）。

/* Global values */
touch-action: inherit;
touch-action: initial;
touch-action: unset;

越學越覺得不懂的東西實在是太多了。。。