W3C home > Mailing lists > Public > www-dom@w3.org > October to December 2011

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

From: Karl Dubost <karld@opera.com>
Date: Tue, 25 Oct 2011 23:50:18 -0400
Message-Id: <46A499C0-BCDE-475C-A221-4C53BEAC3CC2@opera.com>
Cc: www-dom@w3.org
To: Doug Schepers <schepers@w3.org>, Anne van Kesteren <annevk@opera.com>
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 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Friday, 22 June 2012 06:14:08 GMT