Угловой 7 - Не вызывать (щелкать) функцию при перетаскивании - PullRequest
Новая
       28

Угловой 7 - Не вызывать (щелкать) функцию при перетаскивании

0 голосов
/ 24 марта 2019

У меня есть div с картой открытых слоев, например: 

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

Я использую перетаскивание мышью, чтобы перемещаться по карте, и каждый раз, когда я делаю это, функция getInfo триггеры.Я просто хочу, чтобы он срабатывал, когда я щелкаю по карте, а не при навигации.

Возможно ли это?Спасибо!

Ответы [ 3 ]

0 голосов
/ 24 марта 2019

Вы можете использовать комбинацию привязок событий click и mousedown для обработки этой ситуации.Это предотвращает срабатывание события click при перетаскивании карты. 

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

В вашем коде .ts, 

click: boolean = false;

check() {
  window.setTimeout(this.startCheck(), 1000);
}

startCheck() {
  this.click = true;
}

getInfo(event) {
  if (this.click) {
    // handle the real click event
  }
}
0 голосов
/ 27 июня 2019

У меня была та же проблема с обнаружением перетаскивания и щелчка, но я не хотел использовать синхронизированные события. Если щелкнуть слишком медленно, он учитывает перетаскивание, если перетаскивается слишком быстро, он учитывает нажатие.

Вместо этого я использовал позиционирование мыши. Если положение 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
  }
}
0 голосов
/ 24 марта 2019

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

клик срабатывает после событий mousedown и mouseup, в указанном порядке.

Вам, вероятно, придется создавать обработчики mousedown и mouseup, которые устанавливают некоторый временной интервал.

mousedown запустит некоторый таймер ... т.е. 200 мс, и если событие mouseup будет запущено в течение этого интервала, вы можете рассматривать его как щелчок и вызывать getInfo с событием, переданным mouseup

если событие 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

проверьте вывод консоли на этой демонстрации, которую я сделал, вы увидите, какое поведение вы хотите.

...