Как посчитать разницу по координате х за клик мыши?

Question

[kot98]

<div 
  @mousedown="getClickPos"
</div>
...
    startClickPositionCheck (e) {
      console.log(e.clientX, e.pageX, e.target.getBoundingClientRect())
      const startX = e.clientX
      document.addEventListener('mousemove', (ev) => {
        let delta = Math.round(Math.sqrt(Math.pow(startX - ev.clientX, 2))) + 'px'
        console.log(delta)
      })
    },

Как посчитать расстонияе пройденное за один клик мыши? Нужно считать разницу по координате x от момента нажатия ЛКМ до его отпускания

Answer 1

[alexalexes]

// инициализация значений по умолчанию (тело конструктора, если использовать ООП. В классе будете использовать this контекст класса вместо window)
    window.is_mouse_catch = false; // зажата ли мышь?
    window.mouse_path = 0.0; // путь мыши
    // предыдущие координаты мыши
    window.cl_X = null;
    window.cl_Y = null;
    // конец инициализации
    // обработчик нажатия кнопки
    document.addEventListener('mousedown', function(e)
    {
      // фиксируем параметры мыши в переменных, за пределами локальной области видимости обработчика
      window.is_mouse_catch = true;
      window.mouse_path = 0.0;
      window.cl_X = e.clientX;
      window.cl_Y = e.clientY;
    });
    // обработчик отпускания кнопки
    document.addEventListener('mouseup', function(e)
    {
      // фиксируем отпускание кнопки мыши в переменной, за пределами локальной области видимости обработчика
      window.is_mouse_catch = false;
    });
    // обработчик движения мыши
    document.addEventListener('mousemove', function(e)
    {
      // если кнопку не нажимали, то прерываем обработчик
      if(window.is_mouse_catch === false)
        return;
      // определяем текущие координаты
      let currentX = +e.clientX;
      let currentY = +e.clientY;
      // считаем дельту пути
      let delta = ((currentX - window.cl_X) ** 2 + (currentY - window.cl_Y) ** 2) ** 0.5;
      // приращиваем дельту пути к общему результату
      window.mouse_path += delta;
      // переопределяем предыдущие координаты
      window.cl_X = currentX;
      window.cl_Y = currentY;
      // пишем в лог
      console.log('currentX: ' + currentX + '; currentY: ' + currentY + ' delta: ' + delta + '; total_path: ' + window.mouse_path);
    });

Comments

[kot98]

мне нужно получать значение при каждом движении мыши, когда она зажата

[Алексей Уколов]

kot98, ну слушайте не mouseup, а mousemove тогда. В чём сложность-то у вас?

[alexalexes]

Накидал решение на салфетке. Пробуйте.