event.layerX, event.offsetX, event.layerY, event.offsetY

I have searched on the list and have found only one thread in 2000 [1] about it.

There is a lack of interoperability for 
    event.layerX / event.offsetX
    event.layerY / event.offsetY

Mozilla and Webkit implements layerX, layerY
https://developer.mozilla.org/en/DOM/event.layerX
https://developer.mozilla.org/en/DOM/event.layerY

Opera and IE implements offsetX, offsetY
http://msdn.microsoft.com/en-us/library/ms534305.aspx

CSSOM is standardizing offsetX, offsetY
http://www.w3.org/TR/cssom-view/#dom-mouseevent-offsetx


digging a bit I found, the hacks that some Web sites rely on
http://my.opera.com/techie-chat/blog/dom-events-portability-not-that-hard

canvas.onmousedown = function (event) {
    var x = event.layerX || event.offsetX;
    var y = event.layerY || event.offsetY;
    alert(x + " " + y);
}

or as explained in 
http://dev.opera.com/articles/view/html5-canvas-painting/

  // Get the mouse position relative to the canvas element.
  if (ev.layerX || ev.layerX == 0) { // Firefox
    x = ev.layerX;
    y = ev.layerY;
  } else if (ev.offsetX || ev.offsetX == 0) { // Opera
    x = ev.offsetX;
    y = ev.offsetY;
  }




[1]: http://lists.w3.org/Archives/Public/www-dom/2000AprJun/0207.html


-- 
Karl Dubost - http://dev.opera.com/
Developer Relations & Tools, Opera Software

Received on Wednesday, 26 October 2011 03:50:50 UTC