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

Question

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

$(document).mouseup(_onMouseUp);

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

这在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

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

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

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

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

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

$(window).mouseup(_onMouseUp);

Answer 4

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

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

参考： setPointerCapture releasePointerCapture