如何跟踪鼠标移动的距离？答案

【问题标题】：How to track the distance the mouse moved?如何跟踪鼠标移动的距离？
【发布时间】：2020-07-15 15:34:44
【问题描述】：

嘿嘿，

我正在尝试在 vanilla JS 中创建一个可拖动的滑块。

为此，我尝试transform = 'translateX(' + (mouseMovement) + 'px)';carouselSlide.addEventListener('dragover', dragOver); 事件中鼠标移动的像素数量。

但是，我不知道如何存储鼠标第一次移动时的值，+ 或 - 当前位置。到目前为止我试过了。

//Hover listeners
carouselSlide.addEventListener('dragstart', dragStart);
carouselSlide.addEventListener('dragend', dragEnd);
carouselSlide.addEventListener('dragover', dragOver);

function dragStart(){
    var x = event.clientX;
    dragOver(x);
}

function dragEnd(){
    console.log('end');            
}

var lastX = 0;

function dragOver(x){          

    var currentX = event.clientX - x;

    var mouseMove = currentX - lastX;

    
    
    //Slide Direction
    if (currentX > lastX){
        carouselSlide.style.transform = 'translateX(' + (mouseMove) + 'px)';        
    } else if (currentX < lastX) {
        carouselSlide.style.transform = 'translateX(' + (mouseMove) + 'px)';
    }

    lastX = currentX;
    
}

但是，这并没有真正起作用。我确实在另一篇文章中找到了我的解决方案：Calculate the distance the mouse is moved during mouse button is pressed

然而，这是 jQuery

【问题讨论】：

您可能不想跟踪自上次dragover 事件以来的运动，而是自上次dragstart 事件以来的运动。
当函数作为事件处理程序调用时，dragOver 函数的 x 参数将不起作用。

标签： javascript

【解决方案1】：

一种方法是绑定它，以便在启动事件时存储变量。然后我会绑定其他事件来监听位置的变化。最后，我会删除这些事件。

function dragStart(evt) {
  const startX = evt.clientX;

  const handleDrag = function(evt) {
    document.querySelector("#out").textContent = evt.clientX - startX;
  }

  const dragEnd = function(evt) {
    this.removeEventListener("drag", handleDrag);
    this.removeEventListener("dragend", dragEnd);
  }

  this.addEventListener("drag", handleDrag);
  this.addEventListener("dragend", dragEnd);

}

var elem = document.querySelector("#test");
elem.addEventListener('dragstart', dragStart);

#test {
  width: 100%;
  height: 300px;
  background-color: #CCC;
}

#test div {
  width: 100px;
  height: 300px;
  background: yellow;
}

<div id="test">
  <div draggable="true">X</div>
</div>

<div id="out"></div>

【讨论】：