為何用到了touch事件

在專案中，用mint-ui做了一個下拉重新整理的功能。在其他手機都可以，但是在iphonex上當下拉到虛擬鍵位置，下拉框就會卡住，不會回彈。所以為了不讓使用者下拉到虛擬鍵設定了下拉高度和回彈的最大距離，用到了touch事件。

touch事件

最基本的touch事件有四個：

• touchstart

當在螢幕上按下手指時觸發

• touchmove

當在螢幕上移動手指時觸發

• touchend

當在螢幕上擡起手指時觸發

• touchcancel

當一些更高級別的事件發生的時候（如電話接入或者彈出資訊）會取消當前的touch操作，即觸發touchcancel。一般會在touchcancel時暫停遊戲、存檔等操作

它們的觸發順序是touchstart–>touchmove–>touchend

touch可以產生一個TouchEvent物件。

注意:在很多情況下，觸控事件和滑鼠事件會同時被觸發（目的是讓沒有對觸控裝置優化的程式碼仍然可以在觸控裝置上正常工作）。如果你使用了觸控事件，可以呼叫 event.preventDefault()來阻止滑鼠事件被觸發。（我認為可能上拉下的過程中觸發了點選事件，所以下拉不回彈。）

如何在Vue中監聽touch事件

	/**
	 * [TouchMove 監聽touch事件]
	 */
	 TouchMove () {
	   this.$refs.
 
idealist.addEventListener('touchmove', this.handleTouchMove, false)
	   this.$refs.idealist.addEventListener('touchstart', this.handleTouchStart, false)
	   this.$refs.idealist.addEventListener('touchend', this.handleTouchtouchend, false)
	 }

在mounted中呼叫this.TouchMove().然後在methods裡面寫入你想要監聽事件的方法。我這裡應用到了touchmove

	/**
     * [handleTouchStart 記錄Touch開始的Y軸數值]
     */
    handleTouchStart (event) {
      this.startY = event.touches[0].clientY
    },
    /**
     * [handleTouchMove 監聽touchmove時Y軸的數值]
     */
    handleTouchMove (event) {
      if (event.touches[0].clientY - this.startY > 300) {
        this.lodTopBool = true
        this.$refs.loadmoretwo.onTopLoaded()
        this.allLoaded = false
        this.page = 1
        this.pageSize = 20
        setTimeout(() => {
          this.lodTopBool = false
        }, 300)
        this.loadTopList()
      }
    }

• clientX：觸控目標在視口中的x座標。
• clientY：觸控目標在視口中的y座標。
• identifier：標識觸控的唯一ID。
• pageX：觸控目標在頁面中的x座標。
• pageY：觸控目標在頁面中的y座標。
• screenX：觸控目標在螢幕中的x座標。
• screenY：觸控目標在螢幕中的y座標。
• target：觸目的DOM節點目標。
  這樣就實現了在vue中監聽touch事件，超過一定距離下拉重新整理自動回彈重新整理的功能。