Vue移动端touchend事件异常：长按不触发及与mouseup冲突问题解决

方案1：使用Pointer Events（推荐） #

直接用统一的Pointer Events替换原有的鼠标和触摸事件，它能兼容鼠标、触摸、触控笔等多种输入方式，不会出现重复触发或长按无响应的问题：

<rect :x="xPos" :y="yPos" width="75"
     class="arrowbox"
     @pointerdown="mousedown"
     @pointerup="mouseup"
/>

Pointer Events是W3C标准，现代移动端浏览器（包括Galaxy Tab）都已支持，一次绑定就能适配桌面和移动场景，无需分别处理触摸与鼠标事件。

方案2：手动区分触摸与鼠标事件 #

如果不想切换到Pointer Events，可以通过阻止触摸事件的默认行为来避免重复触发，同时保留touchend绑定以处理长按场景：

模板代码： #

<rect :x="xPos" :y="yPos" width="75"
     class="arrowbox"
     @mousedown="mousedown"
     @touchstart="handleTouchStart"
     @mouseup="mouseup"
     @touchend="mouseup"
/>

方法实现： #

methods: {
  handleTouchStart(event) {
    // 阻止触摸事件转化为鼠标事件，避免重复触发
    event.preventDefault();
    this.mousedown(event);
  },
  mousedown() {
    // 原有的mousedown逻辑
  },
  mouseup() {
    // 原有的mouseup逻辑
  }
}

这样修改后，触摸操作只会触发touchstart和touchend，不会再触发对应的鼠标事件，长按释放时touchend也能正常触发mouseup方法。

内容的提问来源于stack exchange，提问作者quilkin