Можно ли поставить событие click в зависимость от других событий мыши?

Question

[romaro]

У меня есть меню, которое на узком экране должно прокручиваться зажатой клавишей мыши:


Код, который я написал, еще далек от идеала, но я все равно приведу его для примера:

this.delta = 0;

        this.contentEl.addEventListener('click', ev => {
            ev.preventDefault();
        });

        this.contentEl.addEventListener('mousedown', ev => {
            const startPoint = ev.clientX;

            const moveHandler = (ev) => {
                this.delta = ev.clientX - startPoint;
                this.contentEl.style.marginLeft = this.marginLeft + this.delta + 'px';
            }

            this.contentEl.addEventListener('mousemove', moveHandler);

            document.addEventListener('mouseup', () => {
                this.marginLeft = this.marginLeft + this.delta;
                this.delta = 0;
                this.contentEl.removeEventListener('mousemove', moveHandler);
                // Переходить по ссылке, если delta = 0
            });
        });

Проблема в том, что при перетаскивании по ссылке срабатывает событие стандартного клика и каждый раз, когда курсор отпускается, пользователь переходит по ссылке. Мне бы хотелось, чтобы переход по ссылке пункта меню происходил только в том случае, если отсутствовало смещение меню.

Можно ли это реализовать, если событие 'click', похоже, видит состояние переменных до вызова 'mousedown'?

Единственное, что приходит в голову, это отменить обработчик по умолчанию для click, а уже в обработчике mousedown -> mouseup анализировать, было смещение или нет. И если дельта равна нулю, реанимировать переход по ссылке (видимо, через window.location.assign).

Comments

[Aetae]

Записывать не только дельту, но и общий сдвиг(т.е. сумма всех дельт при mousemove). А дальше при событии клик - если общий сдвиг больше пары пикселей(на погрешность) - то preventDefault.

Answer 1

[Антон Антон]

На мобилке (где обычно узкий экран) ничего не надо делать, достаточно простого появления скролла из-за overflow-x: auto, на десктопе, если вдруг что-то не влезает - объясните про среднюю кнопку мыши - это тоже поведение по умолчанию.
Если же прям вообще никак-никак, то что-то подобное у меня работает так:

onMouseDown (e) {
      const mapContainer = this.$refs.mapContainer // элемент, внутри которого скроллится
      if (e.target.tagName !== 'svg') return // в то, что внутри svg можно тыкать мышью, таскаем только за пустое место
      this.pos = { // это можно заменить на глобальную переменную
        // текущая позиция скролла
        left: mapContainer.scrollLeft,
        top: mapContainer.scrollTop,
        // текущее положение мыши
        x: e.clientX,
        y: e.clientY,
        dragging: true
      }
    },
    onMouseMove (e) {
      if (!this.pos.dragging) return
      const mapContainer = this.$refs.mapContainer
      // смещение мыши
      const dx = e.clientX - this.pos.x
      const dy = e.clientY - this.pos.y

      // скроллим
      mapContainer.scrollTop = this.pos.top - dy
      mapContainer.scrollLeft = this.pos.left - dx
    },
    onMouseUp () {
      this.pos.dragging = false
    },