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 })