使用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;
});

然后在功能中使用y，y

Answer 3

我认为没有事件就无法做到这一点。我知道在JavaScript中不知道该信息在全球范围内存储该信息。一段时间前，我遇到了同样的问题，并与 mousemove 事件是因为我没有找到其他解决方案。也许一些浏览器实施了一种获得这些坐标的方法，但我不知道。

但是也许你可以使用 mouseenter 和 mouseleave 画布上的事件启用/禁用鼠标位置捕获。这将减少功能调用。