49

私はこれに似た単純なJavascriptコードを持っています：

var mouseIsDown = false;
...
function canvasMouseDown(e) {
  ...
  mouseIsDown = true;
}
function canvasMouseUp(e) {
  mouseIsDown = false;
}
function canvasMouseMove(e) {
  if (mouseIsDown) {
    ...
  }
}

キャンバスを使用した変換（平行移動、スケーリング、回転）用の独自のユーザーインターフェイスを実装しました。

canvasMouseMove()関数チェックmouseIsDown変数内のそのような実装。カーソル/ポインタがcanvas要素の外側にあるときにユーザーがマウスボタンを離さなければ、すべて正常に機能します。その場合、変数mouseIsDownは残りtrue、関数によってオフになりませんcanvasMouseUp。

この問題の純粋なJavaScript （jQueryなし）での簡単な修正または解決策は何ですか？

4

6 に答える 6

28

ドキュメント内の別の場所でイベントをキャッチしたい場合はmouseup、このイベント ハンドラをdocumentelement. これはビューポート外のイベントには反応しないことに注意してください。そのmouseupため、マウスがボタンを押さずにビューポートに再び入ったときにも起動したい場合があります。

マウスがキャンバス要素を離れるのをキャッチしたい場合は、もう少し複雑になります。IE はmouseleaveイベントを認識しますが、標準の DOM にはmouseout、要素の子孫が残ったときにも発生するイベントがあります (ただし、canvas には通常、子要素はありません)。詳細については、quirksmode.orgを参照してください。

動作を示すためにフィドルを作成しました(W3 DOM でのみ動作します)。documentelementに変えてみてはいかがでしょうbody。Opera では、"ドラッグ" が文書内で開始されたときに、イベントのmouseupリスナーが文書外の<html>イベントを検出しmouseupます。これが標準的な動作かどうかはわかりません。

于 2012-07-18T01:46:53.093 に答える
9

document.onmouseup は、ビューポートの外でもスローされます。これは、ドキュメント オブジェクトにバインドすることによってのみ取得できることを知っておくと便利です。ここでテスト: http://jsfiddle.net/G5Xr2/

$(document).mouseup(function(e){
  alert("UP" + e.pageX);
});

マウスの位置も受け取ります！

于 2013-01-09T07:22:34.427 に答える
7

mouseUpイベントをキャッチし、に設定mouseIsDownする高レベルのイベントハンドラー（おそらく本体に）を追加しfalseます。

これがデモです：http：//jsfiddle.net/ZFefV/

于 2012-07-18T01:33:53.060 に答える