javascript - ブラウザ/ウィンドウの外でマウスアップ イベントをキャプチャする

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

はい、ブラウザ ウィンドウ外でマウスアップ イベントをキャプチャすることは可能です。mousedown コールバック内でElement.setCapture()を呼び出すだけです。

マウスアップでもdocument.releaseCapture()を呼び出すことを忘れないでください。

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

Answer 3

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);