图片网格拖拽时mouseup事件未触发的Bug求助

我之前也遇到过一模一样的坑！这种情况大概率是浏览器的原生图片拖拽行为在抢控制权，咱们一步步来搞定它：

• 先阻止图片的原生拖拽行为
  当你在图片上按下鼠标拖拽时，浏览器会自动触发原生的dragstart事件，这个事件会干扰自定义鼠标事件的正常流转，直接导致mouseup事件“失踪”。给所有网格图片绑定这个事件并阻止默认行为：

  // 替换成你实际的图片选择器
  document.querySelectorAll('.grid-image').forEach(img => {
    img.addEventListener('dragstart', (e) => {
      e.preventDefault();
    });
  });
  

• 把mouseup事件绑定到全局document上
  就算阻止了原生拖拽，如果拖拽过程中鼠标移出了图片范围，绑定在图片上的mouseup也可能失效。更稳妥的做法是将拖拽相关的结束和移动事件绑定到全局document，确保无论鼠标在哪松开，事件都能被捕获：

  let isDragging = false;
  let startX, startY, initialImgX, initialImgY;
  
  // 给图片绑定mousedown，标记拖拽开始并记录初始位置
  document.querySelectorAll('.grid-image').forEach(img => {
    img.addEventListener('mousedown', (e) => {
      isDragging = true;
      startX = e.clientX;
      startY = e.clientY;
      initialImgX = parseInt(img.style.left) || 0;
      initialImgY = parseInt(img.style.top) || 0;
    });
  });
  
  // 全局监听mouseup，确保拖拽能正常结束
  document.addEventListener('mouseup', () => {
    if (isDragging) {
      isDragging = false;
      // 这里可以添加拖拽结束的收尾逻辑
    }
  });
  
  // 全局监听mousemove，处理图片移动逻辑
  document.addEventListener('mousemove', (e) => {
    if (isDragging) {
      const deltaX = e.clientX - startX;
      const deltaY = e.clientY - startY;
      // 替换成你的图片移动逻辑
      document.querySelector('.grid-image:hover').style.left = `${initialImgX + deltaX}px`;
      document.querySelector('.grid-image:hover').style.top = `${initialImgY + deltaY}px`;
    }
  });
  

• 检查事件冒泡/捕获的干扰
  排查一下代码里有没有在父元素的鼠标事件中误用e.stopPropagation()或e.preventDefault()，这些操作可能会阻断mouseup事件的传递，导致事件无法被正确触发。

按上面的方法调整后，应该就能解决拖拽后页面持续移动的问题了——核心就是不让浏览器的原生行为干扰自定义拖拽逻辑，同时确保鼠标松开的信号能被全局捕获到。

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