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

一般出现在我们给某个元素同时绑定 touchstart 和 click 事件，比如拖拽事件同时添加返回上一页功能;

先看代码：

<div
    class="suspension"
    :style="{
      position: 'fixed',
      left: `${Left}px`,
      top: `${Top}px`,
    }"
    @touchstart="onTouchStart"
    @touchmove="onTouchMove"
    @touchend="onTouchEnd"
    @click.stop="handleClick"
  >
    <image :src="host + 'dev/0ae5ae9bf2342342342bc494'" class="suspension_img" />
    <p class="goback">返回</p>
  </div>

下列是vue3的语法：

<script lang="ts" setup>
import { useRouter } from "vue-router";
const router = useRouter();
//开始拖动
const onTouchStart = (e: any) => {
};
//拖动停止
const onTouchMove = (e: any) => {
  e.preventDefault();
}
//拖动结束
const onTouchEnd = (e: any) => {

}
//点击事件
const handleClick = (e) => {
   router.go(-1);
}
</script>

只用在@click加stop，且在onTouchMove上添加阻止点击事件触发——e.preventDefault();

即可完成拖动事件@touchstart和点击事件@click分别执行功能，且可以修复拖动按钮时会导致页面滚动问题。

补充：

如果需要阻止点击事件不触发，只触发@touchstart;代码如下：

<div
    class="suspension"
    :style="{
      position: 'fixed',
      left: `${Left}px`,
      top: `${Top}px`,
    }"
    @touchstart.stop.prevent="onTouchStart"
    @touchmove="onTouchMove"
    @touchend="onTouchEnd"
    @click="handleClick"
  >
    <image :src="host + 'dev/0ae5ae9bf66cs32424234494'" class="suspension_img" />
    <p class="goback">返回</p>
  </div>

或者

@touchstart不加修饰符,在onTouchStart点击事件中触发阻止click事件

//触摸事件开启
const onTouchStart = (e: any) => {
  e.preventDefault();
};