使用touchstart、touchmove、touchend與click沖突

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

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

事件執(zhí)行順序

touchstart →touchmove →touchend→click

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

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

touchstart (e) {
      this.startX = e.touches[0].clientX
    },
    touchmove (e) {
      this.moveX = e.touches[0].clientX
      // 如果有滑動距離，則將isTouch設(shè)為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
    },

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

觸摸事件(touchstart、touchmove和touchend)

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

下面具體說明

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

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

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

每個(gè)Touch對象包含的屬性如下。

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

實(shí)際 的使用：

總結(jié)

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

最新評論