Как отменить клик после onDrag элемента?

Question

[Роман Макаров]

Есть реакт приложение, там есть карта, навигация по которой осуществляется 2мя способами.
1) клик на определенную часть карты центрирует экран на этом участке
2) можно тащить карту в разные стороны
Под эти способы написаны разные функции, т.к. карта имеет динамический масштаб элементов в зависимости от текущей позиции экрана (уменьшается/увеличивается)
Что есть
1) при двойном клике центрируем экран на участке, на который кликнули
2) перетаскивание реализовано через mouseDown(ставим флаг)-mouseMove(двигаем карту)-mouseUp(снимаем флаг)

Двойной клик заказчику не нравится, но не могу догадаться как от него избавится. Проблема в том, что после mouseDown+mouseUp событие клика всегда вызывается, т.е. вызываются обе функции навигации, но т.к. флаг через mouseUp уже снят, то и отрабатывают обе.
На ум приходит только хак - снимать флаг через timeout, чего хотелось бы избежать. Может у вас идеи будут?

Answer 1

[Dark Hole]

Вам нужно сделать условие, до которого клик - после которого - драг. Два варианта:
1. Таймаут - плохо, но легко
2. Порог движения - сложно, но риск ошибиться меньше.
Код для второго варианта:

function dragnclick(el, x, y, dragfnc, clickfnc) {
  var dragged = false;
  var startx, starty;
  el.addEventListener('mousedown', function(e) {
    startx = e.clientX;
    starty = e.clientY;
    function dragging(e) {
      if(!dragged && Math.abs(startx - e.clientX) && Math.abs(starty - e.clientY)) dragged = true;
      if(dragged) dragfnc.call(el, e);
    }
    function enddrag(e) {
      if(dragged) dragged = false;
      else сlickfnc.call(el, e);
      window.removeEventListener('mousemove', dragging);
      window.removeEventListener('mouseup', enddrag);
    }
    window.addEventListener('mousemove', dragging);
    window.addEventListener('mouseup', enddrag);
 });

Не тестировал, но суть, думаю, понятна