Question

我目前正在使用：

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

这是我唯一使用Jquery的东西，所以我更喜欢用javascript重写它。

我可以用什么来取代它？

Answer 1

N Rohler提供的答案仅适用于Internet Explorer（在IE8之前有一些错误 - 但我想这对你来说不是问题，因为你使用的是canvas和pageX），而且在Opera中填充为0，如果边框宽度为0，则在Safari / Chrome中。不幸的是，在Firefox中，offsetX和offsetY未定义。 http://www.quirksmode.org/dom/w3c_cssom.html#mousepos

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

Answer 2

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;

Answer 3

您可以使用以下代码替换它

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


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

没有Jquery的Canvas上的鼠标坐标

3 个答案: