拖拽结束时Drag事件返回异常值导致页面滚动跳转的问题求助

我大概是误用了drag事件，但我就是想实现拖拽一个非可拖拽元素就能让窗口滚动的效果，所以写了下面的代码：

<body id="body">
  <img alt="全景图" id="panorama" src="你的图片地址">
</body>
<style>
body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
  overflow-x: auto;
}
img#panorama {
  height: 100vh;
  margin: 0;
  width: auto;
}
</style>
<script>
const $container = document.getElementById('body'), $panorama = document.getElementById('panorama') ;
const dragend = function(){
  dragging = false;
  $container.style.cursor = 'grab';
  $container.style.removeProperty('user-select');
};
const dragstart = function(e){
  dragging = true;
  $container.style.cursor = 'grabbing';
  $container.style.userSelect = 'none';
  pos = { left: window.scrollX, x: e.clientX, };
};
const drag = function(e){
  if(clientX === e.clientX) return;
  clientX = e.clientX;
  console.warn('dragging', e.clientX, e.offsetX, e.x)
  const dx = e.clientX - pos.x;
  window.scroll({ left: pos.left - dx });
};
$container.addEventListener('drag', drag);
$panorama.addEventListener('dragend', dragend);
$panorama.addEventListener('mousedown', dragstart);
</script>

代码能运行，但每次松开鼠标后，页面会突然跳到完全不对的位置。而且console.warn输出的最后几个值不管我拖多远都是一样的，但改变窗口大小后又会变化。我试过把drag换成mousemove，但按住鼠标拖动的时候根本收不到事件...

问题分析与解决方案 #

你这里的核心问题是误用了HTML5原生的drag事件——这个事件是为浏览器内置的拖拽API设计的，触发逻辑和普通鼠标事件完全不同，而且拖拽过程中浏览器会有默认的拖拽行为（比如拖拽图片时生成半透明预览），这会严重干扰你的滚动计算，最后松开鼠标时的跳转就是因为这个默认行为没被阻止。

至于你之前用mousemove没收到事件，大概率是因为绑定的元素不对，或者没处理事件冒泡/默认行为。下面是修正后的完整实现：

<body id="body">
  <img alt="全景图" id="panorama" src="你的图片地址">
</body>
<style>
body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
  overflow-x: auto;
  cursor: grab;
}
img#panorama {
  height: 100vh;
  margin: 0;
  width: auto;
  pointer-events: none; /* 让图片不拦截鼠标事件，直接交给body处理 */
}
</style>
<script>
const $container = document.getElementById('body');

// 提前声明状态变量，避免全局作用域污染
let dragging = false;
let dragStartPos = { left: 0, x: 0 };

const handleDragEnd = () => {
  dragging = false;
  $container.style.cursor = 'grab';
  $container.style.removeProperty('user-select');
  // 鼠标松开后解绑全局的mousemove事件
  document.removeEventListener('mousemove', handleDragMove);
  document.removeEventListener('mouseup', handleDragEnd);
};

const handleDragStart = (e) => {
  // 阻止浏览器默认拖拽行为，这是解决跳转的关键
  e.preventDefault();
  dragging = true;
  $container.style.cursor = 'grabbing';
  $container.style.userSelect = 'none';
  // 记录拖拽初始状态
  dragStartPos = {
    left: window.scrollX,
    x: e.clientX,
  };
  // 把mousemove和mouseup绑定到document，防止鼠标移出容器后丢失事件
  document.addEventListener('mousemove', handleDragMove);
  document.addEventListener('mouseup', handleDragEnd);
};

const handleDragMove = (e) => {
  if (!dragging) return;
  const dx = e.clientX - dragStartPos.x;
  // 计算滚动位置
  window.scrollTo({
    left: dragStartPos.left - dx,
    behavior: 'auto' // 取消平滑滚动，让拖拽更跟手
  });
};

// 只需要给容器绑定mousedown事件即可
$container.addEventListener('mousedown', handleDragStart);
</script>

关键修改点说明： #

1. 替换事件体系：放弃原生drag事件，改用mousedown+mousemove+mouseup的标准鼠标事件流，逻辑更可控
2. 全局事件绑定：把mousemove和mouseup绑定到document上，避免鼠标移出容器后丢失事件
3. 阻止默认行为：在mousedown时阻止默认行为，彻底禁用浏览器的原生拖拽，解决跳转问题
4. 简化事件绑定：给图片加pointer-events: none，让鼠标事件直接穿透到body，不需要单独给图片绑定事件
5. 变量规范化：提前声明状态变量，避免全局作用域污染引发的意外问题

这样修改后，拖拽结束时页面就不会跳转了，滚动计算也会完全准确，console输出的数值也会正常变化。

内容来源于stack exchange