鼠标在画布上的坐标，而不Jquery的

我目前正在使用：鼠标在画布上的坐标，而不Jquery的

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

这是我使用jQuery的唯一的事情，所以我宁愿这仅仅使用JavaScript来重新写。

我可以用什么来取代它？

来源

2011-10-15 Kaninepete

我会看看jQuery的源代码替换它，他们补偿函数内部使用的。 – HerrSerker

我认为它是'element.offsetLeft'和'element.offsetTop'。他们可能使用各种其他的东西。 – mowwwalker

用N Rohler提供的答案只在Internet Explorer中运行良好（与之前的IE8的一些错误 - 但我想它赢了如果填充为0，则在Opera中使用canvas和pageX）;如果边框宽度为0，则在Safari/Chrome中使用。在Firefox中，不幸的是，offsetX和offsetY是未定义的。 http://www.quirksmode.org/dom/w3c_cssom.html#mousepos

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

来源

2011-10-15 23:00:30 MaxArt

我已将它切换到： e.pageX - $（“canvas”）。getBoundingClientRect（）。left 这是您的意思吗？它不适用于Firefox。 – Kaninepete

请在我的答案上查看上面的编辑。 –

是的，你的更新应该可以解决所有问题，至少当目标没有顶部和左边界或填充时，当'offsetX'或'offsetY' * *实际上是0时，有点多余' - 我想我们可以忍受。（只需在定义x的行末尾加一个逗号，或者在y前面放一个'var'）（对不起，如果我没有评论你的回答，我的声望仍然太低 - halp！） – MaxArt

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;

来源

2011-10-15 21:32:38

+1，不知道为什么这没有更多upvotes。如果您在画布上向下滚动并且不考虑window.scrol [XY]，则您的坐标将为_wrong_。 – user445786

您可以通过下面的代码

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


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

来源

2011-12-06 11:50:37 user1083202

鼠标在画布上的坐标，而不Jquery的

回答

相关问题