解决@touchstart和@click事件触发冲突问题,可使@touchstart和@click分别执行

在处理移动端上的点击事件时，由于触摸屏设备的特性，click 事件会有 300ms 的延迟，这是因为浏览器在等待看这次触摸是不是要进行滚动操作。这就导致了 @touchstart 和 @click 事件可能会发生冲突，尤其是当你想要在触摸屏设备上执行不同的操作时。

为了解决这个问题，可以采用以下策略：

1. 使用 touch 事件处理程序来处理快速移动后的触摸行为，并阻止 click 事件的默认行为。
2. 使用 touch 事件的 preventDefault 方法来阻止 click 事件触发。

以下是一个简单的 Vue 示例代码：

<template>
  <div @touchstart="handleTouchStart" @touchend="handleTouchEnd" @click="handleClick">
    Tap me!
  </div>
</template>
 
<script>
export default {
  methods: {
    handleTouchStart(event) {
      // 处理触摸开始
      console.log('Touch start');
      // 阻止 click 事件
      event.preventDefault();
    },
    handleTouchEnd(event) {
      // 处理触摸结束
      console.log('Touch end');
      // 阻止 click 事件
      event.preventDefault();
    },
    handleClick(event) {
      // 处理 click 事件
      console.log('Click');
      // 阻止 click 事件
      event.preventDefault();
    }
  }
}
</script>

在这个例子中，当用户触摸屏幕时，会触发 handleTouchStart 和 handleTouchEnd 方法，并通过 event.preventDefault() 阻止了 click 事件的触发。而当快速点击后，click 事件不会被触发，因为它已经被 touch 事件处理程序阻止了。