vue中touchEnd事件和touchStart、touchMove獲取坐標不一樣，IOS綁定touch事件失效

touchEnd    ~~~~~~~~~~~~~~~~   e.changedTouches[0].pageY

touchStart    ~~~~~~~~~~~~~~~~   e.targetTouches[0].pageY

touchMove    ~~~~~~~~~~~~~~~~   e.changedTouches[0].pageY

activated() {
    this.listenerFunction()
  },
destroyed() {
    window.removeEventListener('scroll', this.listenerFunction)
  },
methods{
    scrollBottom() {
      const windowHeight = window.screen.height
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      const contentHeight = this.$refs.scoreMallContainer.clientHeight
      const toBottom = contentHeight - windowHeight - scrollTop
      this.toBottom = toBottom
    },
    touchstart(e) {
      this.startPageY = e.targetTouches[0].pageY
    },
    touchend(e) {
      this.endPageY = e.changedTouches[0].pageY
      if (!this.toBottom && this.endPageY - this.startPageY < 0) {
        if (!this.$refs.taskView.popup) {
          this.$refs.taskView.popupSwich()
        }
      }
    },
}

 

 popupSwich() {
      this.popup = !this.popup
      const taskBoxStyle = this.$refs.taskBox.style
      this.popup ? taskBoxStyle.overflow = 'scroll' : taskBoxStyle.overflow = 'hidden'
    },

 

不止是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 })