Question

现在我正在停止鼠标上的拖动事件，如下所示：

$(document).mouseup(_onMouseUp);

但是，当鼠标离开浏览器窗口时，我需要捕获鼠标向上事件，类似于Flash中的releaseOutside。

这可能在JS吗？

Answer 1

您无法在浏览器窗口之外检测到mouseup或mousedown事件，但我认为您尝试执行的操作是在用户单击浏览器窗口时取消拖放操作。你可以通过对失去焦点的浏览器窗口做出反应来实现这一点，例如：

$(window).on("blur", function(e) {
    // Cancel my drag and drop here
});

或

$(document).on("blur", function(e) {
    // Cancel my drag and drop here
});

这包括您在浏览器窗口外点击鼠标，以及Windows Alt + Tab任务切换等内容。

Answer 2

是的，可以在浏览器窗口之外捕获mouseup事件。只需在mousedown回调中调用Element.setCapture()。

还记得在mouseup上调用document.releaseCapture()。

elem.addEventListener('mousedown', function() {
    ...
    elem.setCapture();
});
elem.addEventListener('mouseup', function() {
    ...
    document.releaseCapture();
});

Answer 3

可以在浏览器窗口之外捕获鼠标向上事件，如下所示：

elem.addEventListener('mousedown', function(e) {
    ...
    elem.setPointerCapture(e.pointerId);
});
elem.addEventListener('mouseup', function(e) {
    ...
    elem.releasePointerCapture(e.pointerId);
});

参考： setPointerCapture releasePointerCapture

Answer 4

您可以在每个主要浏览器中捕获浏览器窗口外的鼠标事件：Chrome，Edge和Firefox。

您只需要将监听器附加到“窗口”对象，如下所示：

window.addEventListener('mouseup', 
                         () => console.log('mouse up captured outside the window'));

https://codepen.io/fredrikborgstrom/pen/vRBaZw

或者在你的情况下，使用jQuery，它将是：

$(window).mouseup(_onMouseUp);

在浏览器/窗口之外捕获mouseup事件

4 个答案: