Javascript 不带Jquery的画布上的鼠标坐标

我目前正在使用：

e.pageX - $("#canvas").offset().left

这是我使用Jquery的唯一目的，因此我更愿意使用javascript重新编写它

我可以用什么来代替这个

var x = e.offsetX,
    y = e.offsetY;

已（再次）更新（正确）Firefox兼容性：

var rect = e.target.getBoundingClientRect();
var x = e.offsetX || e.pageX - rect.left - window.scrollX,
    y = e.offsetY || e.pageY - rect.top - window.scrollY;

已（再次）更新（正确）Firefox兼容性：

var rect = e.target.getBoundingClientRect();
var x = e.offsetX || e.pageX - rect.left - window.scrollX,
    y = e.offsetY || e.pageY - rect.top - window.scrollY;

---

N Rohler提供的答案仅在Internet Explorer中有效（IE8之前有一些bug，但我想这对您来说不会是问题，因为您使用的是画布和pageX），如果填充为0，则在Opera中有效，如果边框宽度也为0，则在Safari/Chrome中有效。不幸的是，在Firefox中，offsetX和offsetY是未定义的。

---

Kaninepete，为了简单起见，我认为您应该重新考虑获取相对于画布元素的鼠标坐标的方法。您所要做的就是计算画布的位置，这是一项非常简单的任务，使用.getBoundingClientRect（）（另外，如果需要，请不要忘记添加滚动偏移量），然后从pageX和pageY中减去它。

N Rohler提供的答案仅在Internet Explorer中有效（IE8之前有一些bug——但我想这对你来说不会是问题，因为你使用的是画布和pageX），在Opera中，如果填充为0，在Safari/Chrome中，如果边框宽度也为0。不幸的是，在Firefox中，offsetX和offsetY没有定义。

---

Kaninepete，为了简单起见，我认为您应该重新考虑获取相对于画布元素的鼠标坐标的方法。您所要做的就是使用.getBoundingClientRect（）计算画布的位置，这是一项非常简单的任务（另外，如果需要，请不要忘了添加滚动偏移），然后从pageX和pageY中减去它。

您可以用下面的代码替换它

<canvas onmouseDown="mouseDown(event)" width="500" height="500"></canvas>


function mouseDown(e)
{
  var x=e.clientX-canvas.offsetLeft;
  var y=e.clientY-canvas.offsetTop; 
}

功能鼠标向下（e）
{
var x=e.clientX-canvas.offsetLeft；
变量y=e.clientY-canvas.offsetTop；
}

您可以用以下代码替换它

<canvas onmouseDown="mouseDown(event)" width="500" height="500"></canvas>


function mouseDown(e)
{
  var x=e.clientX-canvas.offsetLeft;
  var y=e.clientY-canvas.offsetTop; 
}

功能鼠标向下（e）
{
var x=e.clientX-canvas.offsetLeft；
变量y=e.clientY-canvas.offsetTop；
}

我会看一看jQuery源代码，它们在偏移函数中使用了什么。我认为是

元素。offsetLeft

和

元素。offsetTop

。不过它们可能使用了各种其他东西。我会看一看jQuery源代码，它们在偏移函数中使用了什么。我认为是

元素。offsetLeft

和

element.offsetTop

。不过他们可能会使用各种其他东西。我已经将其切换到：e.pageX-$（“canvas”）。getBoundingClientRect（）.左是你的意思吗？它在firefox中不起作用。是的，你的更新确实应该解决所有问题，至少当目标没有上下边框或填充时，只是当

offsetX

或

offsetY

实际上为0时有点多余-我想我们可以接受这一点。（只需在定义x的行的末尾放一个逗号，或者在y前面放一个

var

）（如果我不评论你的答案，很抱歉，我的声誉还是太低了-哈尔普！）我已将其切换到：e.pageX-$（“canvas”）。getBoundingClientRect（）.左是你的意思吗？它在firefox中不起作用。是的，你的更新确实应该解决所有问题，至少当目标没有上下边框或填充时，只是当

offsetX

或

offsetY

实际上为0时有点多余-我想我们可以接受这一点。（只需在定义x的行的末尾放一个逗号，或在y前面放一个

var

）（如果我不评论你的答案，我的声誉仍然很低-halp！）+1，不知道为什么这没有更多的向上投票。如果你在画布上向下滚动，不考虑窗口。scrol[XY]，您的坐标将是错误的。+1，不知道为什么这没有更多的向上投票。如果您在画布上向下滚动，而不考虑窗口。scrol[XY]，您的坐标将是错误的。