如何捕获mousedown元素之外的mouseup事件？

Question

如果在已触发onmousedown的元素之外释放鼠标按钮，则不会触发Javascript onmouseup event。

这导致JQuery UI中的拖放错误：当鼠标按钮在其容器外部释放时，JQuery draggable元素不会停止拖动（因为元素在到达其父边界时将停止移动）。重现的步骤：

• 转到http://jqueryui.com/draggable/。
• 向下拖动拖动，直到鼠标离开周围的容器
• 释放鼠标按钮（此时未按任何鼠标按钮）
• 将鼠标移回容器
• 拖拉机还在拖着。我希望拖动一旦我释放鼠标按钮就停止了 - 无论它被释放。

我在最新的Chrome和IE中看到了这种行为。

有没有解决办法？

我知道我们可以停止在mouseout或mouseleave上拖动容器，但我想继续拖动，即使我在父容器之外，就像在google maps中一样（无论你在何处释放鼠标，它总是停止拖动地图）。

Answer 1

我找到了解决方案：只需将mouseup事件处理程序附加到document即可。然后它将始终取消，即使您在浏览器外面释放鼠标按钮。

当然，这不是一个漂亮的解决方案，但显然，这是让拖动工作正常的唯一方法。

Answer 2

处理此问题的最佳方法是检查mousemove事件处理程序中的当前按钮状态。如果按钮不再按下，请停止拖动。

如果您将mouseup事件放在文档上，那么您只需向上移动问题，如果您在文档外部（甚至在浏览器窗口之外）释放按钮，原始问题仍会显示。

例如使用jQuery

$div.on("mousedown", function (evt) {
        dragging = true;
  }).on("mouseup", function (evt) {
        dragging = false;
  }).on("mousemove", function (evt) {
        if (dragging && evt.button == 0) {
            //Catch case where button released outside of div
            dragging = false;
        }
        if (dragging) {
          //handle dragging here
        }
  });

你可以跳过mouseup事件处理程序，因为它会被mousemove捕获，但我认为它仍然存在时更具可读性。