使用 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 返回鼠标单击画布的相对坐标。那么这有什么意义呢？

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 中已损坏并已弃用。
它们将在不久的将来从引擎中移除。

Answer 2

对于鼠标坐标 (123,12) event.layerX || event.layerX == 0 将在语句的第一部分 (event.layerX) 和第二部分 (event.layerX == 0) 中为我们提供 TRUE >) 不会被检查。

如果 event.layerX 未定义（因为我们使用的是 Opera），则 event.layerX || 的第一部分event.layerX == 0 会给我们 FALSE 并且第二个不会被检查。

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