event.offsetX in Firefox
From a JQuery bug tracker page - a nice polyfill is this:
var offX = (e.offsetX || e.pageX - $(e.target).offset().left);
.. where e is the event returned from a jquery event. Obviously, only if you've got Jquery already on your project, otherwise will have to do the offset()
stuff manually.
Try layerX, layerY
var x = (e.offsetX === undefined) ? e.layerX : e.offsetX;
var y = (e.offsetY === undefined) ? e.layerY : e.offsetY;
FIDDLE
Unfortunately no solution worked for me.
I found a good implementation here:
var target = e.target || e.srcElement,
rect = target.getBoundingClientRect(),
offsetX = e.clientX - rect.left,
offsetY = e.clientY - rect.top;
e.offsetX = offsetX;
e.offsetY = offsetY;
Unfortunately offsetX and layerX are not exactly the same as offsetX is the offset within the current element but layerX is the offset from the page. Below is a fix I am currently using for this:
function fixEvent(e) {
if (! e.hasOwnProperty('offsetX')) {
var curleft = curtop = 0;
if (e.offsetParent) {
var obj=e;
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
}
e.offsetX=e.layerX-curleft;
e.offsetY=e.layerY-curtop;
}
return e;
}