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

Question

现在我在鼠标上停止拖动事件,如下所示:

$(document).mouseup(_onMouseUp);

但是,当鼠标离开浏览器窗口时,我需要捕获鼠标向上事件,类似于releaseOutsideFlash.

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

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

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

参考文献： setPointerCapturereleasePointerCapture

Answer 3

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

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

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

Answer 4

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

您只需要将侦听器附加到 'window' 对象，如下所示：

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

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

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

$(window).mouseup(_onMouseUp);