マウスアップでDOM要素のドラッグを停止することができません

Question

divには別のdivが含まれている「パネル」というdivがあります。ユーザーが「パネル」をクリック（およびマウスを押したまま）して左右にドラッグすると、内側のdivが左右にドラッグされます。ユーザーがクリックを解除すると、内部divのドラッグが停止されます。ほとんどの場合、これは問題なく動作します。

私が遭遇している問題は、ユーザーがドラッグしているときにマウスが「パネル」を離れるときです。ドラッグが継続されます。このような状況では、ユーザーがマウスボタンを離すと、マウスアップイベントが「パネル」の外で発生しているため、mouseupイベントにおそらく到達していないため、引き続きドラッグが継続されます。ここで

は、私が使用しているコードです：

$(document).ready(function() { 
    $('#panel').bind("mousedown", function (e) { 
        StartDrag();  // Code to drag inner panel goes here     
    }).bind("mouseup", function (e) { 
        StopDrag();  // Code to stop drag goes here 
    }).bind("mouseout", function (e) { 
        $(this).unbind("mousedown"); // This line doesn't help 
     StopDrag();   
    }); 
}); 

私は文書全体にStopDrag（）関数をバインドする場合、それはstartDragを（と干渉する）。

どこで発生するかにかかわらず、マウスアップ時にStopDrag（）関数をトリガーできるようにするにはどうすればよいですか？

Answer 1

最初に、パネルだけでなく、ドキュメント全体に応答するようにイベントハンドラを広げて、マウスがエスケープするのに十分に速く動いて、イベントがドキュメントに移動しても、それらを処理します。

ただし、マウスがウィンドウを完全に離れると問題は残ります。私は自分自身でこの問題に取り組んできましたが、解決策のないDOM APIで長年の問題であると判断しました。ボタンが押されている間にマウスがウィンドウを離れると、ボタンが離されたときにマウスを検出できなくなります。マウスがウィンドウに再び入ると、マウスボタンがまだダウンしているかどうかを調べる方法がありません。

Answer 2

mouseup()をドキュメントオブジェクトに添付します。文書のmouseupハンドラからmousedown()のバインドを解除します。それはそれを解決します。