Angular 10 - Not to trigger (click) function on dragging

Issue

I have a div with an openlayers map like this:

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

I use dragging with my mouse to navigate around the map, and every time I do that the getInfo function triggers. I just want it to trigger when I single click the map, not when I navigate.

Is it possible? Thanks!

Solution

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

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

You will probably have to create mousedown and mouseup handlers that set some sort of time interval.

mousedown will start some timer... ie 200ms, and if a mouseup event gets fired within that interval, you can treat it as a click and call getInfo with the event passed to mouseup

if mouseup event gets fired outside of that interval, assume it's a drag'n'drop mouse action and ignore it.

@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

check the console output on this demo I made, you'll see the behavior you want.

Answered By - Joshua Brokaw