HTML5 con jQuery - e.offsetX non è definito in Firefox

Question

Nella mia pagina HTML5, ho un div con mousemove evento come segue:

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

Funziona bene con Google Chrome. Ma in Firefox, entrambi stanno dando il valore undefined. L'ho verificato usando Firebug, ovvero, ho registrato l'oggetto e in console. Entrambi offsetX e offsetY sono trovati per essere undefined.

Quando ho cercato in Google, ci fosse una soluzione dicendo che dovrei usare layerX e layerY, se entrambi offsetX e offsetY sono indefiniti. Ma da Firebug, non ero in grado di trovarlo. E anche io avevo dato una prova come questa:

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

, ma che è anche dando undefined come valori.

Sto utilizzando il più recente jQuery - v1.8.2. E sto testando il mio Firefox v14.0.1

Qualche idea o suggerimento?

---

EDIT

Grazie a dystroy e vusan per avermi aiutato. La soluzione al problema di cui sopra è il seguente:

SOLUZIONE

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

Provare a utilizzare layerX e layerY per Firefox e offsetX per altro browser.

Se evento sparato con jQuery:

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

Se evento si verificava con javascript:

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

Answer 2

non li trovate, perché la sua nel originalEvent. prova: e.originalEvent.layerX e.originalEvent.layerY

Chi l'pageX e Pagey non stanno calcolando la stessa cosa. layerX è il sinistro dell'oggetto dal primo genitore relativo/assoluto. pageX è la sinistra dell'oggetto dalla pagina.

Answer 3

Utilizzare layerX e layerY in FF e offsetX e offsetY in tutti gli altri browser.

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

Questo funziona bene in Firefox e altri.

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

Answer 5

Firefox in realtà fasupportMouseEvent.offsetX e MouseEvent.offsetY dopo il rilascio 39.0, che viene rilasciato in july 2015.