HTML5 with jQuery - e.offsetX is undefined in Firefox

Solution 1:

Try using layerX and layerY for Firefox and offsetX for other browser.

If event fired with jquery:

xpos = e.offsetX === undefined ? e.originalEvent.layerX : e.offsetX;
ypos = e.offsetY === undefined ? e.originalEvent.layerY : e.offsetY;

If event fired with javascript:

xpos = e.offsetX==undefined?e.layerX:e.offsetX;
ypos = e.offsetY==undefined?e.layerY:e.offsetY;

Solution 2:

Use layerX and layerY in FF and offsetX and offsetY in all other browsers.

$('#canvas').mousemove(function(e){
  xpos = e.offsetX === undefined ? e.originalEvent.layerX : e.offsetX;
  ypos = e.offsetY === undefined ? e.originalEvent.layerY : e.offsetY;

  $('#mouse').html("X : " + xpos + " ; Y : " + ypos);
});

Solution 3:

You did not find them because its in the originalEvent. try: e.originalEvent.layerX e.originalEvent.layerY

About the pageX and pageY they are not calculating the same thing. layerX is the left of the object from the first relative/absolute parent. pageX is the left of the object from the page.