使用 jQuery 获取鼠标坐标答案

【问题标题】：Getting mouse co-ordinates using jQuery使用 jQuery 获取鼠标坐标
【发布时间】：2011-04-11 04:05:09
【问题描述】：

我正在使用 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){ 那样在页面上移动鼠标时获取鼠标位置。

感谢任何帮助，谢谢。

【问题讨论】：

标签： javascript jquery mouse-coordinates

【解决方案1】：

我认为没有事件就没有办法做到这一点。我知道 JavaScript 中没有一个字段可以全局存储该信息。前段时间我遇到了同样的问题，并通过mousemove 事件解决了这个问题，因为我没有找到其他解决方案。也许某些浏览器实现了获取这些坐标的方法，但我不知道。

但也许您可以在画布上使用mouseenter 和mouseleave 事件来启用/禁用鼠标位置捕获。这将减少函数调用。

【讨论】：

【解决方案2】：

$('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();
}

【讨论】：

这就是我想要避免的。我只想从我的drawPaddle 函数中获取鼠标坐标。不过好像没有别的办法了。
您将使用什么事件来触发drawPaddle()，或者您打算何时调用drawPaddle()？

【解决方案3】：

你需要这样做

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

然后在函数中使用wherex,y

【讨论】：