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

Question

请查看此网站上的代码

我希望返回与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返回鼠标点击相对于画布的坐标。这有什么意义呢？

- P.C.

---

我不知道我的代码是否还有其他问题，但在我正在构建的画布应用程序中，它在iPhone上运行良好，但在iPad上，layerX和layerY总是返回-3，-3（因为它从未变化，所以永远没有两个点来定义一条线，因此不会发生绘图）。我不得不改用event.touches [0] .clientX和clientY。 - Robot Woods

Answer 1

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

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中已经被弃用和废弃。 它们将在不久的将来从引擎中删除。

- Shock

Answer 2

对于鼠标坐标（123,12），event.layerX || event.layerX == 0将在语句的第一部分（event.layerX）中返回TRUE，而第二部分（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语句将在所有情况下得到评估的原因。

- Konrad Dzwinel