无法在 mouseup 上停止拖动 DOM 元素

Question

我有一个名为“面板”的 div，它本身包含另一个 div。当用户在“面板”上单击（并按住鼠标）并向左或向右拖动时，将向左或向右拖动内部 div。当用户释放点击时，内部 div 的拖动停止。在大多数情况下，这没有问题。

我遇到的问题是当用户拖动并且鼠标离开“面板”时，拖动继续。在这种情况下，当用户释放鼠标按钮时，拖动仍会继续，因为未达到 mouseup 事件可能是因为 mouseup 事件发生在“面板”之外。

这是我正在使用的代码：

$(document).ready(function() {
    $('#panel').bind("mousedown", function (e) {
        StartDrag();  // Code to drag inner panel goes here     
    }).bind("mouseup", function (e) {
        StopDrag();  // Code to stop drag goes here
    }).bind("mouseout", function (e) {
        $(this).unbind("mousedown"); // This line doesn't help
        StopDrag();  
    });
});

如果我将 StopDrag() 函数绑定到整个文档，那么它会干扰 StartDrag()。

如何确保我可以在 mouseup 时触发我的 StopDrag() 函数，而不管它发生在哪里？

Answer 1

首先，您应该扩展您的事件处理程序以响应整个文档，而不仅仅是面板，这样如果鼠标移动得足够快以退出并且事件转到文档，您仍然可以处理它们。

但是，如果鼠标完全离开窗口，仍然会出现问题。我自己与这个问题搏斗，并确定这是 DOM API 长期存在的问题，没有解决方案。如果在按钮按下时鼠标离开窗口，您将无法检测到按钮何时被释放。当鼠标重新进入窗口时，无法判断鼠标按钮是否仍然按下。

Answer 2

将您的mouseup() 附加到文档对象。并将您的 mousedown() 与文档的 mouseup 处理程序解除绑定。这样就解决了。