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

如果在已触发

onmousedown

的元素外部释放鼠标按钮，则不会触发

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

• 去
• 向下拖动拖动对象，直到鼠标离开周围的容器
• 释放鼠标按钮（此时未按下鼠标按钮）
• 将鼠标移回容器中
• 可拖动设备仍在被拖动。我希望只要我松开鼠标按钮，拖动就停止了——不管它被释放到哪里

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

附近有工作吗

---

我知道我们可以停止在

mouseout

或

mouseleave

上拖动容器，但我希望继续拖动，即使我在父容器之外，就像在中一样（无论在何处释放鼠标，它总是停止拖动贴图）.

我找到了解决方案：只需将

mouseup

事件处理程序附加到

文档

。然后它将始终取消，即使您在浏览器外释放鼠标按钮

---

当然，这不是一个很好的解决方案，但显然，这是正确进行拖动的唯一方法。

处理此问题的最佳方法是检查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捕获，但我认为它仍然在那里更可读。

包含：'parent'

？？？PS：我看到当鼠标按钮在文档外释放时，元素仍然是可拖动的：（谢谢，我只是想知道如何在文档外跟踪光标（或者如果有办法的话）我没有注意到谷歌地图做了这件事，尽管我已经注意到其他一些网站没有，而且当他们没有做的时候，这很烦人。无论如何，感谢你发布了你自己的答案，它帮助了我！这只会把问题提高，如果你在文档（或窗口）外释放鼠标按钮，你也会遇到同样的问题。这可以用我的答案中的解决方案来解决。@Mog0当你在文档外释放鼠标按钮时，你能产生一个不起作用的小提琴吗？它对我很有效。我更喜欢这个解决方案，除了我发现这个属性（至少在Firefox上）是mouse.button，不是mouse.button。mouse.button始终为0me@ErinDrummond很好的发现。evt.button==0意味着IE上没有按钮。你有可用的小提琴吗？我不能让它在Chrome上工作：-这个解决方案可移植吗？