使用Javascript鼠標事件返回鼠標在HTML5畫布上的座標？

請參閱this site上的代碼使用Javascript鼠標事件返回鼠標在HTML5畫布上的座標？

我想返回一個鼠標點擊/移動相對於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 OR event.layerY是0 ... 我的意思是event.layerX返回鼠標點擊w.r.t帆布的相對座標。那麼這是怎麼回事呢？

來源

2012-01-16 P.C.

我不知道在我的代碼中是否有其他錯誤，但是在我正在構建的canvas應用程序中，它可以在iPhone上正常工作，但在iPad上，layerX和layerY將始終返回-3， - 3（因爲它從來沒有變化，所以從來沒有兩個點來定義一條線，所以不會出現任何繪圖）。我不得不使用'event.touches [0] .clientX'和'clientY'。 – 2012-01-18 03:09:30

對於鼠標座標（123,12）event.layerX || event.layerX == 0會給我們真在聲明（event.layerX），第二個（event.layerX == 0）的第一部分將不檢查。

如果event.layerX爲undefined（因爲即我們正在使用Opera）event.layerX || event.layerX == 0的第一部分會給我們假，第二個不會被檢查。

但還有一種可能性。鼠標座標可能是（0,123），並且event.layerX || event.layerX == 0的第一部分會給我們FALSE，而這些座標完全有效。這就是爲什麼第二部分event.layerX == 0將返回TRUE，因此if語句將被評估。

來源

2012-01-16 10:26:26

更好的方法是這樣的代碼：

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的過時。他們將在不久的將來從引擎中移除。

來源

2012-01-20 14:38:30 Shock

使用Javascript鼠標事件返回鼠標在HTML5畫布上的座標？

回答

相關問題