使用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語句將被評估。