javascript - Angular 10-拖动时不触发(单击)功能

Question

我有一个带有openlayers map 的div，如下所示:

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

我使用鼠标拖动在 map 上导航，每次执行 getInfo函数都会触发。我只希望它在单击 map 时触发，而不是在导航时触发。

可能吗？谢谢!

Answer 1

https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event

click fires after the mousedown and mouseup events, in that order.

您可能必须创 build 置某种时间间隔的mousedown和mouseup处理程序。

mousedown将启动一个计时器...即200毫秒，如果在该间隔内触发了mouseup事件，则可以将其视为单击并通过将事件传递给mouseup来调用getInfo

如果在该间隔之外触发了mouseup事件，请假定这是拖放操作，然后将其忽略。

@ViewChild('map') mapElem: ElementRef;

ngAfterViewInit() {
  const mousedown$ = fromEvent(this.mapElem.nativeElement, 'mousedown');

  const mouseup$ = fromEvent(this.mapElem.nativeElement, 'mouseup');

  mousedown$.subscribe(e => {
    const clickTimer$ = timer(200);
    mouseup$.pipe(takeUntil(clickTimer$)).subscribe(e => this.getInfo(e));
  });
}

getInfo(e) {
  console.log('click')
}

https://stackblitz.com/edit/angular-sobuqt

在我制作的此演示中检查控制台输出，您将看到所需的行为。