[英]Return coordinates of mouse click on HTML5 canvas using Javascript mouse events?
See the code on this site 请参阅本网站上的代码
I want to return the relative coordinates of a mouse click/move with respect to the html5 canvas. 我想返回鼠标单击/移动相对于html5画布的相对坐标。 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 works on all browsers except Opera. layerX适用于除Opera之外的所有浏览器。 offsetX works on all browsers except Firefox
offsetX适用于除Firefox以外的所有浏览器
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 wrt canvas. 那么我们的意思是,如果event.layerX或event.layerY为0 ...我的意思是event.layerX返回鼠标点击wrt画布的相对坐标。 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;
}
It is shortly, correct, and 它很快,正确,而且
event.layerX and event.layerY are broken and deprecated in WebKit.
event.layerX和event.layerY在WebKit中被破坏和弃用。 They will be removed from the engine in the near future.
它们将在不久的将来从发动机中移除。
For mouse coordinates (123,12) event.layerX || event.layerX == 0
对于鼠标坐标(123,12)
event.layerX || event.layerX == 0
event.layerX || event.layerX == 0
will give us TRUE in the first part of the statement ( event.layerX
) and the second one ( event.layerX == 0
) won't be checked. event.layerX || event.layerX == 0
将在语句的第一部分( event.layerX
)中为TRUE,而不会检查第二部分( event.layerX == 0
)。
If event.layerX is undefined
(because ie. we are using Opera) first part of the event.layerX || event.layerX == 0
如果event.layerX
undefined
(因为即我们正在使用Opera) event.layerX || event.layerX == 0
第一部分 event.layerX || event.layerX == 0
will give us FALSE and the second one won't be checked. event.layerX || event.layerX == 0
将给我们FALSE,第二个将不会被检查。
But there is one more possibility. 但还有一种可能性。 Mouse coordinates may be (0, 123) and the first part of
event.layerX || event.layerX == 0
鼠标坐标可以是(
event.layerX || event.layerX == 0
)和event.layerX || event.layerX == 0
的第一部分 event.layerX || event.layerX == 0
will give us FALSE while these coordinates are perfectly valid. 当这些坐标完全有效时,
event.layerX || event.layerX == 0
会给我们FALSE。 That's why there is a second part event.layerX == 0
which will return TRUE so the if statement will be evaluated after all. 这就是为什么有一个第二部分
event.layerX == 0
将返回TRUE所以if语句将被评估。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.