使用touchstart、touchmove、touchend與click沖突

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

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

事件執(zhí)行順序

touchstart →touchmove →touchend→click

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

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

touchstart (e) {
      this.startX = e.touches[0].clientX
    },
    touchmove (e) {
      this.moveX = e.touches[0].clientX
      // 如果有滑動(dòng)距離，則將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è)置后就不會(huì)影響點(diǎn)擊事件了。一開(kāi)始我還以為是異步問(wèn)題，搞了半天原來(lái)是事件的優(yōu)先級(jí)問(wèn)題。

觸摸事件(touchstart、touchmove和touchend)

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

下面具體說(shuō)明

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

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

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

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

• clientX：觸摸目標(biāo)在視口中的x坐標(biāo)。
• clientY：觸摸目標(biāo)在視口中的y坐標(biāo)。
• identifier：標(biāo)識(shí)觸摸的唯一ID。
• pageX：觸摸目標(biāo)在頁(yè)面中的x坐標(biāo)。
• pageY：觸摸目標(biāo)在頁(yè)面中的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è)參考，也希望大家多多支持腳本之家。

最新評(píng)論