使用纯javascript检测鼠标拖动和方向答案

【问题标题】：Detect mouse drag and direction using pure javascript使用纯javascript检测鼠标拖动和方向
【发布时间】：2022-07-25 17:59:48
【问题描述】：

我试图在拖动鼠标时检测鼠标方向。当鼠标按钮按下并且用户拖动鼠标时，我希望文本根据鼠标拖动方向向左或向右变化。

这是我的代码。

var divOverlay = document.getElementById ("div");

var dragged = false
window.addEventListener('mousedown', function () { dragged = false })
document.addEventListener('mousemove', function () { dragged = true })
window.addEventListener('mouseup', function(e) {

    
        if (dragged == true && e.pageX <= 0) {
            direction = "left"
        } else if (dragged == true && e.pageX >= 0) {
            direction = "right"
        }
        
        divOverlay.innerHTML = direction;
        
        oldx = e.pageX;
})

#div {
  width: 100px;
  height: 100px;
  background: red;
}

&lt;div id="div"&gt;&lt;/div&gt;

我不认为我离得太远了，但我无法锻炼我做错了什么，所以我需要一些帮助。

【问题讨论】：

如果不使用oldx，为什么还要存储它？
您希望在mouseup 或mousemove 上更改文本吗？
@Apollo79 最快的。我只想检测用户是向左还是向右拖动
@RobbyCornelissen 我正在使用它，但为了尝试找出我的问题，我从 if 语句中删除了它。

标签： javascript drag mousedown

【解决方案1】：

您应该在位置检查中添加oldX。您还需要对其进行初始化。

var divOverlay = document.getElementById ("div");

var dragged = false
var oldX = 0;
window.addEventListener('mousedown', function () { dragged = false })
document.addEventListener('mousemove', function () { dragged = true })
window.addEventListener('mouseup', function(e) {

    
        if (dragged == true && e.pageX <= oldX) {
            direction = "left"
        } else if (dragged == true && e.pageX > oldX) {
            direction = "right"
        }
        
        divOverlay.innerHTML = direction;
        
        oldX = e.pageX;
})

#div {
  width: 100px;
  height: 100px;
  background: red;
}

&lt;div id="div"&gt;&lt;/div&gt;

【讨论】：

谢谢，但拖动结果有点随机。我可以向右拖动几次，文本会向左移动。