在瀏覽器/窗口之外捕獲 mouseup 事件

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

您可以在每個主要瀏覽器的瀏覽器窗口外捕獲 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);

Answer 4

可以在瀏覽器窗口之外捕獲鼠標向上事件，如下所示：

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

參考資料： setPointerCapture releasePointerCapture