亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue中使用touchstart、touchmove、touchend與click沖突問題

 更新時間:2023年01月23日 11:25:36   作者:吃~貨  
這篇文章主要介紹了Vue中使用touchstart、touchmove、touchend與click沖突問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

使用touchstart、touchmove、touchend與click沖突

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

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

事件執(zhí)行順序

touchstart →touchmove →touchend→click

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

上網(wǎng)找了很久終于找到一個方法,就是通過活動距離來判斷,當(dāng)滑動距離大于自己設(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è)置后就不會影響點擊事件了。一開始我還以為是異步問題,搞了半天原來是事件的優(yōu)先級問題。

觸摸事件(touchstart、touchmove和touchend)

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

下面具體說明

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

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

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

每個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é)點目標(biāo)。

實際 的使用:

總結(jié)

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

相關(guān)文章

最新評論