Angular 10 - 拖动时不触发（单击）功能

Question

我有一个带有 openlayers 地图的 div，如下所示：

<div id="map" (click)="getInfo($event)" class="map"></div>

我使用鼠标拖动来浏览地图，每次我这样做时都会getInfo触发该功能。我只希望它在我单击地图时触发，而不是在我导航时触发。

是否可以？谢谢！

Answer 1

我在检测拖动与点击时遇到了同样的问题，但不想使用定时事件。如果点击太慢，它会考虑拖动 如果拖动太快，它会考虑点击。

相反，我使用了鼠标定位。如果 x,y 位置在鼠标按下和单击（鼠标抬起时触发）之间发生变化，则它正在拖动，否则它正在单击。

伪代码：

<div (mousedown)="onMouseDown($event)" (click)="onClick($event)"></div>

.ts 文件：

mousePosition = {
  x: 0,
  y: 0
};

mouseDown($event) {
  this.mousePosition.x = $event.screenX;
  this.mousePosition.y = $event.screenY;
}

onClick(selectedWidget, $event) {
  if (this.mousePosition.x === $event.screenX && this.mousePosition.y === $event.screenY) {
    // Execute Click
  }
}