HTML5 con jQuery - e.offsetX no está definido en Firefox

Question

En mi página de HTML 5, tengo un div con mousemove evento como sigue:

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

Funciona bien con Google Chrome. Pero en Firefox, ambos dan el valor undefined. Lo he comprobado usando Firebug, es decir, he registrado el objeto e en la consola. Ambos offsetX y offsetY son undefined.

Cuando busqué en Google, había una solución diciendo que debería usar layerX y layerY, si ambos offsetX y offsetY no están definidos. Pero de Firebug, no pude encontrarlo. E incluso le había dado una oportunidad como esta:

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

Pero eso también está dando undefined como valores.

Estoy utilizando el jQuery más reciente - v1.8.2. Y estoy probando en mi Firefox v14.0.1

¿Alguna idea o sugerencia?

---

EDITAR

Gracias a dystroy y Vusan por ayudarme. La solución al problema anterior es el siguiente:

SOLUCIÓN

$('#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); 
}); 

Answer 1

Intente utilizar layerX y layerY para Firefox y offsetX de otro navegador.

Si el acontecimiento que disparó con jQuery:

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

Si el acontecimiento que disparó con javascript:

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

Answer 2

Usted no encontró ellas porque está en el originalEvent. intento: e.originalEvent.layerX e.originalEvent.layerY

Sobre el pageX y pageY no están calculando la misma cosa. layerX es la izquierda del objeto del primer pariente relativo/absoluto. pageX es la izquierda del objeto de la página.

Answer 3

Use layerX y layerY en FF y offsetX y offsetY en todos los demás navegadores.

$('#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); 
}); 

Answer 4

Esto funciona bien en firefox y otros.

var offsetRequired = (e.offsetX || e.pageX - $(e.target).offset().left); 

Answer 5

Firefox realidad hace supportMouseEvent.offsetX y MouseEvent.offsetY después de la liberación 39.0, que se libera en july 2015.