使用touchstart、touchmove、touchend與click沖突

今天做項目，突然發(fā)現(xiàn)了這個問題。就是在移動端，一個元素既注冊有滑動事件，又注冊有點擊事件時就會出現(xiàn)一些問題。

比如我就不知道滑動事件的優(yōu)先級是大于點擊事件的，而當我們只想執(zhí)行點擊事件而不想觸發(fā)滑動時間時，就必須做個處理

事件執(zhí)行順序

touchstart →touchmove →touchend→click

所以當我們執(zhí)行點擊事件時，其實在執(zhí)行點擊事件之前，就已經(jīng)執(zhí)行了滑動事件了。如果滑動事件的邏輯和點擊事件的邏輯不一樣，這樣就會出現(xiàn)問題。

上網(wǎng)找了很久終于找到一個方法，就是通過活動距離來判斷，當滑動距離大于自己設定的距離時，就執(zhí)行滑動事件，否則就不執(zhí)行。

touchstart (e) {
      this.startX = e.touches[0].clientX
    },
    touchmove (e) {
      this.moveX = e.touches[0].clientX
      // 如果有滑動距離，則將isTouch設為true
      if (this.moveX) {
        this.isTouch = true
      }
    },
touchEnd () {
      if (this.isTouch) {
        if (this.startX - this.moveX < -50 && this.moveX) { // 右滑觸發(fā)
          this.getData()
        } else if (this.startX - this.moveX > 50 && this.moveX) { //左滑觸發(fā)
          this.getData()
        }
      }
      this.startX = 0
      this.moveX = 0
      this.isTouch = false
    },

這樣設置后就不會影響點擊事件了。一開始我還以為是異步問題，搞了半天原來是事件的優(yōu)先級問題。

觸摸事件(touchstart、touchmove和touchend)

觸摸事件(touch)會在用戶手指放在屏幕上面的時候、在屏幕上滑動的時候或者是從屏幕上移開的時候出發(fā)。

下面具體說明

• touchstart事件：當手指觸摸屏幕時候觸發(fā)，即使已經(jīng)有一個手指放在屏幕上也會觸發(fā)。
• touchmove事件：當手指在屏幕上滑動的時候連續(xù)地觸發(fā)。
• touchend事件：當手指從屏幕上離開的時候觸發(fā)。

除了常見的DOM屬性，觸摸事件還包含下面三個用于跟蹤觸摸的屬性。也就是存在于事件的默認參數(shù)event中。

• touches：表示當前跟蹤的觸摸操作的touch對象的數(shù)組。
• targetTouches：特定于事件目標的Touch對象的數(shù)組。
• changeTouches：表示自上次觸摸以來發(fā)生了什么改變的Touch對象的數(shù)組。

每個Touch對象包含的屬性如下。

• clientX：觸摸目標在視口中的x坐標。
• clientY：觸摸目標在視口中的y坐標。
• identifier：標識觸摸的唯一ID。
• pageX：觸摸目標在頁面中的x坐標。
• pageY：觸摸目標在頁面中的y坐標。
• screenX：觸摸目標在屏幕中的x坐標。
• screenY：觸摸目標在屏幕中的y坐標。
• target：觸目的DOM節(jié)點目標。

實際 的使用：

總結

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論