使用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或event.layerY为0，我们所说的是什么意思。。。 我的意思是event.layerX返回鼠标单击w.r.t画布的相对坐标。那么这有什么意义呢？

对于鼠标坐标（123,12）

event.layerX | event.layerX==0

将在语句的第一部分（

event.layerX

）为真，第二部分（

event.layerX==0

）将不被检查

如果event.layerX

未定义

（因为我们正在使用Opera），则

event.layerX | | event.layerX==0

的第一部分将为FALSE，第二部分不会被检查

---

但还有一种可能性。鼠标坐标可能是（0，123），当这些坐标完全有效时，

event.layerX | | event.layerX==0的第一部分将为FALSE。这就是为什么还有第二个部分
event.layerX==0
，它将返回TRUE，因此最终将对if语句进行求值。
更好的方法是这样的代码：

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

它是简短的、正确的、正确的

在WebKit中，event.layerX和event.layerY已损坏且不推荐使用。
它们将在不久的将来从发动机上拆下

我不知道我的代码中是否有其他错误，但在我正在构建的canvas应用程序中，它在iPhone上运行良好，但在iPad上，layerX和layerY总是返回-3，-3（因为它从不变化，所以从来没有两个点定义一条线，所以不会出现绘图）。我不得不改用
event.touch[0].clientX
和
clientY
。