Question

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

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

这是我正在使用的代码：

$(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

将mouseup()附加到文档对象。并从文档的mousedown()处理程序取消绑定mouseup。这将解决它。

Answer 2

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

但是，如果鼠标完全离开窗口仍然存在问题。我自己也在解决这个问题，并确定这是DOM API的一个长期存在的问题，没有解决方案。如果鼠标在按钮关闭时离开窗口，则无法检测按钮何时释放。当鼠标重新进入窗口时，无法确定鼠标按钮是否仍然按下。

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

2 个答案: