Angular2平板触摸事件异常：长按按钮无法触发定时执行函数

这种跨端的事件兼容问题确实挺闹心的，我来帮你搞定它！

问题根源分析 #

在Android平板这类触摸设备上，长按按钮会触发浏览器的默认行为（比如弹出上下文菜单），这会干扰我们的touchstart事件监听；另外Angular不像jQuery那样会自动帮你处理触摸与鼠标事件的兼容冲突，所以需要手动做一些适配。

解决方案步骤 #

1. 绑定完整的事件集

要同时兼顾触摸设备和桌面设备，需要给按钮绑定以下事件：

• 桌面端：(mousedown)、(mouseup)、(mouseleave)
• 触摸端：(touchstart)、(touchend)、(touchcancel)（touchcancel是防止触摸被意外中断时漏停定时器）

2. 阻止触摸默认行为

在touchstart触发时调用event.preventDefault()，避免Android系统弹出长按菜单干扰我们的逻辑。

3. 安全管理定时器

用标志位防止触摸和鼠标事件同时触发导致重复启动定时器，确保定时器能被正确清除。

完整代码示例 #

组件模板（HTML）

<button 
  (mousedown)="startRepeatingAction($event)"
  (mouseup)="stopRepeatingAction()"
  (mouseleave)="stopRepeatingAction()"
  (touchstart)="startRepeatingAction($event)"
  (touchend)="stopRepeatingAction()"
  (touchcancel)="stopRepeatingAction()">
  长按执行任务
</button>

组件逻辑（TS）

import { Component } from '@angular/core';

@Component({
  selector: 'app-long-press-button',
  templateUrl: './long-press-button.component.html'
})
export class LongPressButtonComponent {
  private intervalId: any;
  private isActionRunning = false;

  startRepeatingAction(event: MouseEvent | TouchEvent): void {
    // 阻止触摸默认行为，解决Android长按弹窗问题
    event.preventDefault();
    
    // 防止重复启动定时器
    if (this.isActionRunning) return;

    this.isActionRunning = true;
    // 立即执行一次目标函数，再开始定时循环
    this.yourRepeatingFunction();
    this.intervalId = setInterval(() => {
      this.yourRepeatingFunction();
    }, 200);
  }

  stopRepeatingAction(): void {
    if (this.intervalId) {
      clearInterval(this.intervalId);
      this.intervalId = null;
    }
    this.isActionRunning = false;
  }

  // 这里替换成你需要重复执行的业务逻辑
  private yourRepeatingFunction(): void {
    console.log("任务执行中...");
    // 比如更新数据、发送请求等操作
  }
}

补充说明 #

你之前用jQuery没问题，是因为jQuery内部已经封装了触摸事件的兼容处理，自动帮你处理了默认行为阻止和事件冲突；而Angular更偏向原生事件绑定，所以这些细节需要我们手动处理。

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