jQueryを使用してマウスの座標を取得します

Question

私はjqueryとを使用してブレイクアウトゲームを構築しています <canvas> エレメント。パドルを制御するために、マウスに従います。だから私は自分の中にマウスの座標を取得する必要があります drawPaddle() 方法。

jqueryサイトで見ると、このような例があります。

$(document).mousemove(function(e){
    $('#status').html(e.pageX +', '+ e.pageY);
});

これは私が望むことをしますが、このようなプロジェクトに別の機能を追加したくありません。これは私の drawPaddle() 方法：

function drawPaddle() {
    c.beginPath();
    c.rect(paddleX, paddleY, 150, 10);
    c.closePath();
    c.fill();
    // Get mouse position and update paddleX and paddleY here
}

だから私はいつでもマウスの位置を取得する方法を見つける必要があります drawPaddle() 呼び出され、マウスがページに移動するときはいつでもありません $(document).mousemove(function(e){ します。

どんな助けも感謝しています、ありがとう。

Answer 1

$('canvas').mousemove(function(e){
    drawPaddle(e.pageX, e.pageY);
});


function drawPaddle(paddleX, paddleY) {
    c.beginPath();
    c.rect(paddleX, paddleY, 150, 10);
    c.closePath();
    c.fill();
}

Answer 2

あなたはする必要があります

var where = {}
$('canvas').mousemove(function(e){
    where.x = e.pageX
    where.y = e.pageY;
});

そして、関数でwherex、yを使用します

Answer 3

イベントなしでそれを行う方法はないと思います。その情報をグローバルに保存するJavaScriptのフィールドはありません。しばらく前に私は同じ問題を抱えていて、 mousemove 私は他の解決策を見つけなかったのでイベント。一部のブラウザは、それらの座標を取得する方法を実装するかもしれませんが、私にはわかりません。

しかし、多分あなたは使用することができます mouseenter と mouseleave キャンバスでのイベントは、マウスの位置をキャプチャできる/無効にします。これにより、関数呼び出しが削減されます。