如何在Angular/TypeScript中捕获双击并按住的事件？

这个问题我之前在处理SVG元素交互时也碰到过类似的情况，原生的dblclick事件确实没法直接满足“双击后按住拖拽”的需求——因为它是在第二次mouseup之后才触发的，这时候用户的按住动作已经被错过了。手动跟踪点击时间和状态是更可靠的方式，下面给你一套具体的实现方案：

首先，在你的组件类里定义几个状态变量，用来跟踪点击时间、拖拽状态和起始点：

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

@Component({
  selector: 'app-polygon-drag',
  templateUrl: './polygon-drag.component.html',
  styleUrls: ['./polygon-drag.component.css']
})
export class PolygonDragComponent {
  // 记录最后一次点击的时间戳
  private lastClickTime: number = 0;
  // 标记是否处于双击拖拽激活状态
  private isDoubleClickDragActive: boolean = false;
  // 记录拖拽起始点（鼠标位置与多边形位置的偏移）
  private dragStartOffset: { x: number, y: number } | null = null;
  // 多边形的当前位置（用于更新SVG的transform）
  public polygonPosition = { x: 50, y: 50 };
  // 示例多边形的点坐标
  public polygonPoints = "0,0 50,0 50,50 0,50";
}

接下来实现鼠标事件的处理逻辑：

1. 处理多边形的mousedown事件 #

这个方法用来判断当前点击是普通单击还是双击的第二次点击，从而激活拖拽模式：

onPolygonMousedown(event: MouseEvent) {
  const currentTime = Date.now();
  const timeSinceLastClick = currentTime - this.lastClickTime;
  // 双击时间阈值，和系统默认的500ms保持一致，可按需调整
  const doubleClickThreshold = 500;

  if (timeSinceLastClick < doubleClickThreshold && !this.isDoubleClickDragActive) {
    // 第二次点击，进入双击拖拽模式
    this.isDoubleClickDragActive = true;
    // 计算鼠标与多边形的偏移量，避免拖拽时多边形瞬移到鼠标位置
    this.dragStartOffset = {
      x: event.clientX - this.polygonPosition.x,
      y: event.clientY - this.polygonPosition.y
    };
  } else {
    // 普通单击，重置拖拽状态
    this.isDoubleClickDragActive = false;
  }

  // 更新最后一次点击的时间戳
  this.lastClickTime = currentTime;
  // 阻止事件冒泡，避免影响SVG的其他事件
  event.stopPropagation();
}

2. 处理SVG的mousemove事件 #

当处于双击拖拽模式时，实时更新多边形的位置：

onSvgMousemove(event: MouseEvent) {
  if (this.isDoubleClickDragActive && this.dragStartOffset) {
    // 根据鼠标位置和偏移量计算多边形的新位置
    this.polygonPosition.x = event.clientX - this.dragStartOffset.x;
    this.polygonPosition.y = event.clientY - this.dragStartOffset.y;
  }
}

3. 处理鼠标松开/离开事件 #

在鼠标松开或者离开SVG区域时，重置拖拽状态，避免状态残留：

onSvgMouseUpOrLeave() {
  this.isDoubleClickDragActive = false;
  this.dragStartOffset = null;
}

最后在组件的模板文件中，给SVG和多边形绑定对应的事件：

<svg 
  width="500" 
  height="500" 
  style="border: 1px solid #ccc;"
  (mousemove)="onSvgMousemove($event)"
  (mouseup)="onSvgMouseUpOrLeave()"
  (mouseleave)="onSvgMouseUpOrLeave()"
>
  <polygon
    [attr.points]="polygonPoints"
    [style.transform]="'translate(' + polygonPosition.x + 'px, ' + polygonPosition.y + 'px)'"
    (mousedown)="onPolygonMousedown($event)"
    fill="#42b983"
    cursor="move"
  ></polygon>
</svg>

一些额外的注意点： #

• 如果需要支持多个多边形，你需要把状态变量改成针对每个多边形的（比如用Map<HTMLElement, DragState>来存储每个多边形的拖拽状态），避免多个多边形的状态互相干扰。
• 如果你用的是SVG内部的坐标系（不是视口坐标），可以用event.offsetX/event.offsetY替代clientX/clientY，或者通过event.target.getScreenCTM()来转换坐标，确保位置计算准确。
• 时间阈值可以根据用户的使用习惯调整，一般保持在300-500ms之间比较合适。

备注：内容来源于stack exchange，提问作者Aneesh Gupta