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

问题描述：

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

I want to return the relative coordinates of a mouse click/move with respect to the html5 canvas. What does the code below mean?

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之外的所有浏览器

layerX works on all browsers except Opera. offsetX works on all browsers except Firefox

那么，如果event.layerX或event.layerY为0，我们的意思是什么...
我的意思是event.layerX返回鼠标单击wrt画布的相对坐标。那么这有什么意义呢？

So what do we mean by, if either event.layerX OR event.layerY is 0... I mean event.layerX returns relative coordinates of mouse click w.r.t canvas. So how does this make any sense?

答

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

The better way is such code:

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中被破坏和弃用。
他们将在不久的将来从引擎中删除。

event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

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

相关推荐