使用纯JavaScript检测鼠标拖拽及方向的问题求助

你当前代码的核心问题是用鼠标抬起时的e.pageX和0做对比，这完全无法判断拖拽方向——pageX是鼠标相对于文档左边缘的坐标，正常场景下几乎不会<=0（除非拖出浏览器最左侧）。正确逻辑应该是记录鼠标按下时的初始X坐标，和抬起时的X坐标做差值对比，以此判断拖拽方向。

现有代码的具体问题 #

• 未记录鼠标按下时的起始坐标，缺少判断方向的基准值
• dragged变量逻辑有缺陷：只要鼠标移动就标记为拖拽，会把未按下鼠标的移动误判为拖拽
• direction和oldx未声明为局部变量，会自动成为全局变量，容易引发代码冲突
• 全局监听mousemove会造成不必要的性能消耗，应该按需添加/移除监听

修复后的完整代码 #

HTML #

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

CSS #

#div {
  width: 100px;
  height: 100px;
  background: red;
  user-select: none; /* 防止拖拽时选中文本干扰操作 */
}

JavaScript #

const divOverlay = document.getElementById('div');
let startX = 0;
let dragged = false;

// 鼠标按下时记录起始坐标，并添加移动监听
window.addEventListener('mousedown', function(e) {
  startX = e.pageX;
  dragged = false;
  document.addEventListener('mousemove', onMouseMove);
});

// 仅在按下鼠标后的移动动作标记为拖拽状态
function onMouseMove() {
  dragged = true;
}

// 鼠标抬起时判断方向，移除移动监听
window.addEventListener('mouseup', function(e) {
  document.removeEventListener('mousemove', onMouseMove);
  
  if (!dragged) return; // 无拖拽动作直接终止逻辑
  
  const endX = e.pageX;
  const direction = endX < startX ? 'left' : 'right';
  
  divOverlay.textContent = direction;
});

修复说明 #

1. 按下鼠标时记录startX作为方向判断的基准，同时按需添加mousemove监听，避免全局监听的性能浪费
2. 只有按下鼠标后的移动才会标记dragged为true，避免误判
3. 通过对比endX（抬起时坐标）和startX（按下时坐标）的差值，准确判断拖拽方向
4. 用textContent替代innerHTML，更安全且性能更好
5. 添加user-select: none优化拖拽体验，防止拖拽时选中文本

内容的提问来源于stack exchange，提问作者Juan-man