MacBook Pro触控板下JS鼠标事件拖拽图片无法触发mouseup求助

核心问题分析 #

• 作用域限制：onMouseMove函数定义在mousedown回调内部，外部的mouseup回调无法访问该函数，导致无法移除mousemove监听。
• 事件绑定错误：mouseup绑定在原ball元素上，拖拽时鼠标已离开原元素，释放操作不会触发该事件；同时存在拼写错误onmouseup（无对应函数引用）。
• 偏移量计算错误：克隆元素未插入DOM时，getBoundingClientRect()无法获取正确位置，导致拖拽位置偏移。
• 重复ID问题：每次克隆都设置相同ID，违反HTML唯一ID规则。

修复后的代码 #

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <p>Drag image item from toolbar</p>
  <table>
    <tr>
      <td><img src="soccer-gate.jpeg" id="gate"></td>
      <td><img src="ball.jpeg" id="ball"></td>
    </tr>
  </table>  
  
  <script>
    const ball = document.getElementById("ball");
    let currentClone = null;
    let currentMoveHandler = null;

    ball.onmousedown = function(event) {
      // 基于原球计算偏移量，避免克隆元素未插入DOM的位置问题
      const originalRect = ball.getBoundingClientRect();
      const shiftX = event.clientX - originalRect.left;
      const shiftY = event.clientY - originalRect.top;

      // 创建克隆球，不设置重复ID
      const ball_clone = ball.cloneNode(true);
      ball_clone.style.position = 'absolute';
      ball_clone.style.zIndex = 1000;
      document.body.append(ball_clone);

      // 保存当前克隆元素和移动处理函数，方便mouseup时访问
      currentClone = ball_clone;
      function moveAt(pageX, pageY) {
        ball_clone.style.left = pageX - shiftX + 'px';
        ball_clone.style.top = pageY - shiftY + 'px';
      }

      currentMoveHandler = function(event) {
        moveAt(event.pageX, event.pageY);
      };
      document.addEventListener('mousemove', currentMoveHandler);
    };

    // 将mouseup绑定到document，确保任何位置释放都能触发
    document.addEventListener('mouseup', function() {
      if (currentMoveHandler) {
        document.removeEventListener('mousemove', currentMoveHandler);
        // 清空引用，避免内存泄漏
        currentMoveHandler = null;
        currentClone = null;
      }
    });

    ball.ondragstart = function() {
      return false;
    };
  </script>
</body>
</html>

关键修改说明 #

• 作用域优化：通过全局变量currentMoveHandler和currentClone保存拖拽相关的函数和元素，让mouseup回调可以访问到需要移除的事件监听。
• 事件绑定调整：将mouseup事件绑定到document上，确保鼠标在任何位置释放都能触发停止拖拽的逻辑。
• 偏移量修正：基于原ball的位置计算shiftX和shiftY，避免克隆元素未插入DOM时的位置错误。
• 移除重复ID：不再给克隆球设置固定ID，避免ID冲突问题。

触控板操作提示 #

确保MacBook触控板的拖拽手势已开启：打开「系统偏好设置-触控板-更多手势」，勾选「拖移」相关选项，避免系统级手势干扰页面事件触发。

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