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

Return coordinates of mouse click on HTML5 canvas using Javascript mouse events?

本文关键字：鼠标 坐标 Javascript 事件 返回 HTML5 使用      更新时间：2023-09-26

查看此站点上的代码

我想返回鼠标点击/移动相对于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.layer Y为0，我们的意思是什么。。。我的意思是event.layerX返回鼠标单击w.r.t画布的相对坐标。那么，这有什么意义呢？

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

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中已损坏并已弃用。它们将在不久的将来从发动机上拆下。

对于鼠标坐标（123,12），event.layerX || event.layerX == 0将在语句的第一部分（event.layerX）中为TRUE，而第二部分（event.layerX == 0）将不会被检查。

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

但还有一种可能性。鼠标坐标可能是（0123），event.layerX || event.layerX == 0的第一部分会给我们FALSE，而这些坐标是完全有效的。这就是为什么第二部分event.layerX == 0将返回TRUE，因此if语句将被求值。

相关文章：