使用Javascript鼠标事件返回鼠标在HTML5画布上的坐标？

请参阅this site上的代码使用Javascript鼠标事件返回鼠标在HTML5画布上的坐标？

我想返回一个鼠标点击/移动相对于html5画布的相对坐标。下面的代码是什么意思？

if (event.layerX || event.layerX == 0) { // Firefox 
      mouseX = event.layerX ; 
      mouseY = event.layerY; 
} else if (event.offsetX || event.offsetX == 0) { // Opera 
      mouseX = event.offsetX; 
      mouseY = event.offsetY; 
}

layerX适用于除Opera之外的所有浏览器。 OFFSETX适用于所有的浏览器Firefox的除外

那么，我们的意思是，如果任一event.layerX OR event.layerY是0 ... 我的意思是event.layerX返回鼠标点击w.r.t帆布的相对坐标。那么这是怎么回事呢？

来源

2012-01-16 P.C.

我不知道在我的代码中是否有其他错误，但是在我正在构建的canvas应用程序中，它可以在iPhone上正常工作，但在iPad上，layerX和layerY将始终返回-3， - 3（因为它从来没有变化，所以从来没有两个点来定义一条线，所以不会出现任何绘图）。我不得不使用'event.touches [0] .clientX'和'clientY'。 – 2012-01-18 03:09:30

对于鼠标坐标（123,12）event.layerX || event.layerX == 0会给我们真在声明（event.layerX），第二个（event.layerX == 0）的第一部分将不检查。

如果event.layerX为undefined（因为即我们正在使用Opera）event.layerX || event.layerX == 0的第一部分会给我们假，第二个不会被检查。

但还有一种可能性。鼠标坐标可能是（0,123），并且event.layerX || event.layerX == 0的第一部分会给我们FALSE，而这些坐标完全有效。这就是为什么第二部分event.layerX == 0将返回TRUE，因此if语句将被评估。

来源

2012-01-16 10:26:26

更好的方法是这样的代码：

if (event.offsetX == null) { // Firefox 
    mouseX = event.originalEvent.layerX; 
    mouseY = event.originalEvent.layerY; 
} else {      // Other browsers 
    mouseX = event.offsetX; 
    mouseY = event.offsetY; 
}

这是前不久，正确的，

event.layerX和event.layerY断了，在WebKit的过时。他们将在不久的将来从引擎中移除。

来源

2012-01-20 14:38:30 Shock

使用Javascript鼠标事件返回鼠标在HTML5画布上的坐标？

回答

相关问题