捕获浏览器/窗口外的鼠标up事件

Capture mouseup event outside of browser/window

本文关键字：鼠标 up 事件 窗口 浏览器      更新时间：2023-09-26

现在我停止鼠标向上拖动事件，像这样:

$(document).mouseup(_onMouseUp);

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

这在JS中可能吗?

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

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

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

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

$(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任务切换。

您可以在浏览器窗口外捕获鼠标事件，在每个主要浏览器: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);

可以像下面这样在浏览器窗口外捕获鼠标向上事件:

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

引用:setPointerCapturereleasePointerCapture

相关文章：