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

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将在语句的第一部分（ event.layerX ）中为TRUE，而不会检查第二部分（ event.layerX == 0 ）。

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

但还有一种可能性。 鼠标坐标可以是（ event.layerX || event.layerX == 0 ）和event.layerX || event.layerX == 0的第一部分 当这些坐标完全有效时， event.layerX || event.layerX == 0会给我们FALSE。 这就是为什么有一个第二部分event.layerX == 0将返回TRUE所以if语句将被评估。