HTML5 with jQuery - e.offsetX is undefined in Firefox

Question

In my HTML5 page, I have a div with mousemove event as follows:

$(\'#canvas\').mousemove(function(e){
    xpos = e.offsetX;
    ypos = e.offsetY         


        

Answer 1

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);
});