Htmlのキャンバスは、私はキャンバスを作成していると私はそれにマウスイベントを追加した左マウスがダウンしているとき遅れとChrome

Question

上を移動：私はマウスの左ボタンを押したままにする場合

canvas = document.getElementById('canvas'); 
context = canvas.getContext('2d'); 
canvas.width = screenWidth; 
canvas.height = screenHeight; 

... 

// CALLED AT START: 
function setup() { 
    // Mouse movement: 
    document.onmousemove = function(e) { 
     e.preventDefault(); 
     target.x = e.pageX; 
     target.y = e.pageY; 
     angle = Math.atan2((target.y - localPlayer.getY()), 
      (target.x - localPlayer.getX())); 
     // Distance to mouse Check: 
     var dist = Math.sqrt((localPlayer.getX() - target.x) 
      * (localPlayer.getX() - target.x) + (localPlayer.getY() - target.y) 
      * (localPlayer.getY() - target.y)); 
     var speedMult = dist/(canvas.height/4); 
     socket.emit("update", { 
      ... 
     }); 
    } 
    document.onmousedown = function(e) { 
     e.preventDefault(); 
    } 
} 

は今、問題があると同時にマウスを動かすと、私のゲームはかなり遅れる。単にマウスを動かすだけでラグは発生しません。私はchromeとfirefoxでこれをテストしました。私はクロムで問題を再現することしかできないようです。マウスの中央ボタンまたは右ボタンを使用すると、ゲームで同じ動作になり、遅延が発生しません。マウスの左ボタンを使用した場合にのみ遅れが発生します。

私は答えを周りを見回したと、私はそうのようにデフォルトの動作を防ぐ必要があることを発見した：

e.preventDefault(); 

をしかし、それは問題を解決できませんでした。また、マウスの位置を表す数字を画面上で更新しようとしました。それは正常に更新されました。ゲーム自体は遅れていた。左ボタンが押されている間にonMouseMovedが呼び出されないことがありますか？しかし、なぜそれが中と右のボタンで呼び出されますか？

問題は、私が左キーを押していないときにうまく動作し、Firefoxでうまく動作するため、moveメソッドの中で呼び出すコードで行う必要があります。何か他のことが起こっているに違いありません。

編集：私は何が起こっているかを見るためにクロムの記録に決めました。結果は次のようになります。 中マウスボタンまたは右ボタンを押すと、ゲームは同じことをしますが、全く遅れることはありません。あなたは何をしていますか？

EDIT：ここでテストしてください：www.vertix.io誰もがこの問題を再現できないようです。

ありがとうございます。

Answer 1

スロットルを検討しましたか？

あなたは、マウスの左ボタンを押しながら、同じ時間でそれを移動すると、あなたがをドラッグあるhttps://blog.toggl.com/2013/02/increasing-perceived-performance-with-_throttle/

Answer 2

をチェックしてください。

編集は：クロームの一部のバージョンでは、dragイベントもdraggableを有する素子ずに解雇させるバグが（私はこの答えを投稿するとき、私はそれを持っていた、今私にはない）があり、属性。通常、dragイベントは、属性がtrueに設定されている要素（デフォルトではドラッグ可能な画像とアンカーを除く）からのみ有効になります。

はdragイベントが発生しているMDN、によれば、このようなmousemoveなどmouseのイベントは、あなたの関数が呼び出されていないことを意味するものではありません。

可能な解決策は、両方dragとmousemoveイベントのために同じ機能を使用するために、次のとおりです。

function mouseMove(e) { 
    //do your things here 
    ... 
} 

document.addEventListener('mousemove', mouseMove); 

document.addEventListener('drag', mouseMove); 

注：あなたは、両方のイベントに同じ機能を使用します場合は、あなたがどのプロパティを認識する必要がありますdragとmousemoveイベントの違いのために、この関数で使用しているイベントの2つのイベントには全く同じプロパティが含まれておらず、一部のプロパティの動作は両方で同じではない場合があります。

Answer 3

文書上にマウスイベントがあります。ドキュメント上にあるものがわからないので、それが問題の原因であるかどうかを知ることは困難です。

マウスイベントをキャンバスに移動してみてください。必要なのはそれが唯一の場所なので、私は推測します。子要素にイベントが添付されている場合は、ドキュメントがゲームに含まれていない場合はポイントを処理しません。彼らは最初に行き、その後あなたのものまで泡立ちます。

フレームワークを使用しているように見えますが、フレームワークの一部である別のマウスイベントリスナーが、デフォルトを妨げないようにあなたを減速させている可能性があります。フレームワークを検索して、マウスイベントのリスナーがあるかどうかを確認する必要があります。

そしてaddEventListenerを使用するのではなく、直接.onmousedown = eventHandler
例えばcanvas.addEventListener("mousedown",eventHandler);

を経由してイベントを取り付けるそして、あなたは、いない文書のためにそれを必要とする要素にイベントリスナーを追加します。

Answer 4

function mouseMove(e) { 
//do your things here 
... 
} 

document.onmousemove = mouseMove; 

    document.ondrag = function(e) { 
mouseMove(e); 
//do another things 
... 
}