What substitute should we use for layerX/layerY since they are deprecated in webkit?

Here is a function to calculate layerX and layerY from a click event:

function getOffset(evt) {
  var el = evt.target,
      x = 0,
      y = 0;

  while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
    x += el.offsetLeft - el.scrollLeft;
    y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
  }

  x = evt.clientX - x;
  y = evt.clientY - y;

  return { x: x, y: y };
}

Thanks a lot to Stu Cox for pointing out the two functions used to make this one.

Are you sure layerX and layerY are deprecated?

In my experience they are still there, mostly because the related properties offsetX and offsetY are not implemented in other browsers:

There is a lot of discussion going on at webkit and mozilla though:

https://bugs.webkit.org/show_bug.cgi?id=21868 and https://bugzilla.mozilla.org/show_bug.cgi?id=674292 In a nutshell, they are both a bit inconclusive whether or not to remove it, so for now they did not remove it.

later IE versions provide an alias that maps to the x and y properties (I am not allowed to post any further links by stack overflow, because of a lack of 'reputation').

The only reasonably cross-browser ways to detect mouse position are clientX/clientY (relative to window), screenX/screenY (relative to entire screen) and pageX/pageY (relative to document, but not supported in IE8 and below).

Quirksmode suggests this for standardising to a relative-to-document value:

function doSomething(e) {
    var posx = 0;
    var posy = 0;
    if (!e) var e = window.event;
    if (e.pageX || e.pageY)     {
        posx = e.pageX;
        posy = e.pageY;
    }
    else if (e.clientX || e.clientY)     {
        posx = e.clientX + document.body.scrollLeft
            + document.documentElement.scrollLeft;
        posy = e.clientY + document.body.scrollTop
            + document.documentElement.scrollTop;
    }
    // posx and posy contain the mouse position relative to the document
    // Do something with this information
}

Then you could use this to work out its position relative to your element.

Horrible, I know, but the internet's a horrible place.