如何检测窗口外的鼠标弹起事件？

Question

我正在寻找 jQuery 解决方案以检测窗口外的 mouseup。也就是说，在鼠标在窗口内被按下后，拖到外面仍然按下，然后在外部释放时，事件应该触发。

我尝试过使用 document.mouseup = function() {}，但没有起效果。我试图按照这个例子here的方法去做，但没能完全理解（我甚至留言请求帮助，但还没有得到回复 :( ）。

- SexyBeast

---

我认为应该是document.onmouseup。 - Fabrício Matté

是的，我是指那个... :D - SexyBeast

Answer 1

我有一个网站使用这个事件，它的工作方式与你所描述的相同：

$(window).on('mouseup', function(){
   //your code here
});

注意：只测试过jQuery 1.8.3版本，但应该可以在1.9版本上运行。

jsFiddle证实了此代码的可行性。可在jQuery 1.9.1和2 beta版本中使用：http://jsfiddle.net/udRNx/1/ 如果你不知道，这段代码必须放置在$(document).ready(fn)或$(window).onload(fn)之中。

- GeriBoss

---

实际上，等待DOM准备完毕并不是非常必要的。window对象可以在文档准备就绪之前任何地方访问，因此您可以在jQuery库之后的任何位置包含此代码。 - Fabrício Matté

哦，我的错。应该尝试使用 window 而不是 document。看来我已经把我的大脑捐给了动物园... :D - SexyBeast

然而，我观察到了一件奇怪的事情。如果我在文档中的任何地方按下鼠标并拖动它，直到选择某个元素（无论是文本还是图像）（如蓝色高亮显示），那么当鼠标在窗口外释放时，$(document).mouseup()会触发。但是，如果以这种方式将其拖出并释放，以至于没有选择任何内容，则相同的操作不起作用... - SexyBeast

显然，$(window).mousemove(fn)（而不是$(elem).mousemove(fn)）还会跟踪窗口外的位置，只要在窗口内按下并保持某个按钮。如果您想即使指针移出也保持移动对象或其他内容，则这很好。 - Jonas Berlin

这不是所有情况下都适用。例如：https://codepen.io/thdoan/pen/jwLPjL（点击图像，向上拖到顶部框架，松开）。 - thdoan