vue的touchStart事件及click事件冲突问题

问题

给某个元素同时绑定touchStart及click事件后，若在移动设备上，当你点击时，会依次出发这两个事件。因为移动端设备上的click事件触发是会延迟300ms，所以touchStart事件会先触发后再触发click事件。这样导致每次都要执行两次，这样毫无意义。

解决方式

preventDefault方法

<ul class="list">
  <li class="item" v-for="item of letters"
  :key="item"
  :ref="item"
  @touchstart="handleTouchStart"
  @click="handleleterClick"
  >{{item}}</li>
</ul>

<ul class="list">
  <li class="item" v-for="item of letters"
  :key="item"
  :ref="item"
  @touchstart.stop.prevent="handleTouchStart"
  @click="handleleterClick"
  >{{item}}</li>
</ul>

  methods: {
    handleleterClick (e) {
      console.log('click事件执行一次')
      this.$emit('change', e.target.innerText)
    },
    handleTouchStart (e) {
     console.log('TouchStart执行一次')
      e.preventDefault()//添加阻止click事件触发
      this.touchStatus = true
    }
  }
}

上面示例有两种写法，根据习惯套用即可。

判断浏览器是否支持触屏事件

<ul class="list">
  <li class="item" v-for="item of letters"
  :key="item"
  :ref="item"
  @click="handleSelfClick"
  >{{item}}</li>
</ul>

methods: {
   handleleterClick (e) {
     console.log('click事件执行一次')
     this.$emit('change', e.target.innerText)
   },
   handleTouchStart (e) {
     console.log('TouchStart执行一次')
     this.touchStatus = true
   },
   handleSelfClick (e) {
     console.log('ontouchstart' in document)//打印是否支持touch事件。
     if ('ontouchstart' in document) {
       this.handleTouchStart(e)
     } else {
       this.handleleterClick(e)
     }
   }
 }

通过”ontouchend” in document来判断浏览器是否支持触屏事件，若支持调用touch事件，不支持调用click事件。

拓展

vue的touchstart、touchmove、touchend使用案例

事件绑定

v-on:touchstart="bodyTouchStart"
v-on:touchmove="bodyTouchMove"
v-on:touchend="bodyTouchEnd"

触摸开始

bodyTouchStart: function(event) {
      // console.log(111);
      // 获得起点X坐标，初始化distance为0
      this.touchStartPointX = event.targetTouches[0].pageX;
      this.touchStartPointY = event.targetTouches[0].pageY;
      // console.log(this.touchStartPoint);
      this.distanceX = 0;
      this.distanceY = 0;
    },

触摸移动

bodyTouchMove: function(event) {
      // console.log(222);
      if (this.touchStartPointX < this.touchLeft) {
        // 只监听单指划动，多指划动不作响应
        if (event.targetTouches.length > 1) {
          return;
        }
        // console.log(event.targetTouches[0].pageX);
        // 实时计算distance
        this.distanceX = event.targetTouches[0].pageX - this.touchStartPointX;
        this.distanceY = event.targetTouches[0].pageY - this.touchStartPointY;
        // 根据distance在页面上做出反馈。这里演示通过返回按钮的背景变化作出反馈
      }
    },

触摸结束

bodyTouchEnd: function(event) {
      if (this.touchStartPointX < this.touchLeft) {
        // 划动结束，重置数据
        this.touchStartPointX = 0;
        this.touchStartPointY = 0;
        // 当划动距离超过100px时，触发返回事件
        // if (this.distanceX > 100) {
        let temp = this.distanceY / this.distanceX;
        // console.log(this.distanceY, this.distanceX, temp);
        if (this.distanceX > 10 && temp < 0.176 && temp > -0.176) {
          // 返回前修改样式，让过渡动画看起来更快
          this.$router.go(-1);
        }
      }
    }

查看MDN

触摸事件 - Web API 接口参考 | MDN (mozilla.org)