Angular中Google地图如何有条件触发click事件解决与dblclick的冲突

核心逻辑是通过延迟执行的计时器，阻断双击时触发的多余单击响应：

• 用组件类的成员属性保存单击逻辑的计时器ID，避免作用域丢失
• 单击触发时不直接执行业务逻辑，而是把原有单击回调放到200~300ms的延迟计时器中等待执行
• 若延迟等待期内触发了双击事件，直接清除对应的待执行计时器，跳过单击逻辑
• 延迟窗口走完未检测到双击，再正常执行单击的业务响应

具体实现代码 #

// Angular组件类内定义属性、常量
private clickTimerId: number | null = null;
// 双击判定等待窗口，250ms是兼顾响应速度和判定准确率的常用值
private readonly CLICK_WAIT_TIME = 250;

// 给多边形绑定事件监听器
initPolygonListeners(polygon: google.maps.Polygon) {
  google.maps.event.addListener(polygon, 'click', (event) => {
    // 清除上一次残留的未执行计时器，避免连续单击叠加触发逻辑
    if (this.clickTimerId) clearTimeout(this.clickTimerId);

    // 原有单击逻辑移入延迟计时器
    this.clickTimerId = window.setTimeout(() => {
      console.log('We clicked the polygon');
      console.log(polygon, event);
      this.clickTimerId = null;
    }, this.CLICK_WAIT_TIME);
  });

  google.maps.event.addListener(polygon, 'dblclick', (event) => {
    // 触发双击时取消待执行的单击逻辑
    if (this.clickTimerId) {
      clearTimeout(this.clickTimerId);
      this.clickTimerId = null;
    }
    // 原有双击逻辑直接放在此处
    console.log('We double clicked the polygon');
    console.log(polygon, event);
  });
}

// 组件销毁时清理未执行的计时器，避免内存泄漏
ngOnDestroy(): void {
  if (this.clickTimerId) clearTimeout(this.clickTimerId);
}

实操注意事项 #

• 等待时长可根据用户操作习惯微调，最长不建议超过300ms，否则单击会出现明显的响应迟滞感；最短不建议低于150ms，否则快速双击时会来不及取消单击逻辑，依然出现多余触发的问题
• 不要把计时器ID存在click回调的局部变量中，必须存在组件类的成员属性上，否则双击事件触发时无法获取到对应的计时器ID，没法正常执行清除操作
• 必须通过ngOnDestroy生命周期钩子清理残留计时器，避免组件销毁后计时器仍触发逻辑，造成控制台报错、内存占用异常

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