Na minha página HTML5, tenho uma div commousemove evento da seguinte forma:

$('#canvas').mousemove(function(e){
    xpos = e.offsetX;
    ypos = e.offsetY;
    $('#mouse').html("X : " + xpos + " ; Y : " + ypos);
});

Funciona bem com o Google Chrome. Mas no Firefox, ambos estão dando o valorundefined. Eu verifiquei usando o Firebug, isto é, registreie objeto para console. AmbosoffsetX eoffsetY são encontrados para serundefined.

Quando pesquisei no Google, havia uma solução dizendo que eu deveria usarlayerX elayerY, se ambosoffsetX eoffsetY são indefinidos. Mas do Firebug, não consegui encontrá-lo. E até eu tentei assim:

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

Mas isso também está dandoundefined como valores.

Eu estou usando o jQuery mais recente - v1.8.2. E estou testando no meu Firefox v14.0.1

Alguma idéia ou sugestão?

EDITAR

Graças a dystroy e vusan por me ajudar. A solução para o problema acima é a seguinte:

SOLUÇÃO

$('#canvas').mousemove(function(e){
  $('#cursor').show();
  if(e.offsetX==undefined) // this works for Firefox
  {
    xpos = e.pageX-$('#canvas').offset().left;
    ypos = e.pageY-$('#canvas').offset().top;
  }             
  else                     // works in Google Chrome
  {
    xpos = e.offsetX;
    ypos = e.offsetY;
  }
  $('#mouse').html("X : " + xpos + " ; Y : " + ypos);
});