如何在Javascript中正确获取鼠标位置？

我制作了一个小JS程序，用来模拟球的物理特性，其中HTML画布应该调整到窗口高度。我这样做是为了使画布能够调整大小，但是当它调整大小时，鼠标位置无法正常工作，当单击鼠标时，球不会出现在屏幕上（就像它们应该出现的那样）。我一直在使用clientX和clientY来获取鼠标位置，但我不知道这是否是最好的方法。代码如下：

0&&！（关闭）{
yVel+=2；
}否则如果（getVerticalDistance（y，window.innerHeight-5-半径）<0）{
yVel=yVel*-1；
if（垂直距离（y，窗内高度-5-半径）<-20）{
y=y-50
}
}
yVel*=0.97；
xVel*=0.99；
对象[i][3]=xVel
objects[i][4]=yVel
对象[i][0]=x+xVel
对象[i][1]=y+yVel
};
//window.requestAnimationFrame（updateData）
};
功能图箭头（x1、y1、x2、y2）{
}
函数mouseMove（e）{
mouseX=e.clientX；
穆西=e.clientY；
}
函数onMouseDown（）{
createRadius=5；
动画=请求动画帧（增加）；
};
功能增加（）{
如果（createRadius<80）{
createRadius+=3；
}
newStylus=新触针球（mouseX、mouseY、createRadius）
动画=请求动画帧（增加）；
};
函数onMouseUp（）{
window.cancelAnimationFrame（动画）；
newBall=新球（mouseX、mouseY、createRadius、0,0）；
};
函数render（）{
对于（i=0；i

我认为这会有所帮助，您需要获得鼠标相对于画布的位置。因此，创建一个函数来获取鼠标位置：

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

canvas.addEventListener('mousedown', function(evt) {
    isMouseDown = true;
    mousePos = getMousePos(canvas, evt);
    message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
    writeMessage(canvas, message);

  }, false);

然后，在为mousedown和mouseup事件添加事件侦听器时，可以设置鼠标位置：

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

canvas.addEventListener('mousedown', function(evt) {
    isMouseDown = true;
    mousePos = getMousePos(canvas, evt);
    message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
    writeMessage(canvas, message);

  }, false);

---

如果要获取相对于画布左上角点的鼠标位置，应使用event.offsetX和event.offsetY（假定已将mousemove事件处理程序附加到画布元素）

试试这个：

function mouseMove(e) {
      var mouseX = e.offsetX;
      var mouseY = e.offsetY;
}

---

您可能有兴趣尝试此流行的动画框架：。请参见示例。首先，格式化代码。现在很难读。下一步，尽可能用最小的、有效的例子来说明你的问题。接下来，clientX和clientY应该可以正常工作。到底出了什么问题？这里已经回答了这个问题。看看前面的这篇文章，它展示了如何在用户调整大小和滚动时有效地获取鼠标位置。这是一个“确定”的解决方案。它可以变得更有效，因为边界矩形通常只在调整大小和滚动时更改。因此，您可以保存

rect.left

和

rect.top

并在“getMousePos”中重用它们（而不是重新计算它们）。