HTML5 z jQuery - e.offsetX jest niezdefiniowane w Firefoksie

Question

W mojej strony HTML5, Mam div z mousemove przypadku następująco:

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

Współpracuje z Google Chrome. Ale w Firefoksie oba nadają wartość undefined. Sprawdziłem to za pomocą Firebug, czyli zalogowałem obiekt e do konsoli. Zarówno offsetX, jak iuznano za undefined.

Kiedy szukałem w Google, nie było rozwiązanie mówiąc powinienem użyć layerX i layerY, jeśli zarówno offsetX i offsetY są niezdefiniowane. Ale od Firebuga nie mogłem go znaleźć. I nawet dałem mu spróbować tak:

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

Ale to również daje undefined jako wartości.

Używam najnowszej wersji jQuery - v1.8.2. I testuję w Firefoksie v1.0.0.1

Wszelkie pomysły i sugestie?

---

EDIT

Dzięki dystroy i vusan za pomoc. Rozwiązaniem powyższego problemu jest następujący:

ROZWIĄZANIE

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

Spróbuj użyć layerX i layerY dla Firefoksa i offsetX dla innej przeglądarki.

Jeśli wydarzenie zwolniony z jQuery:

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

Jeśli wydarzenie zwolniony z javascript:

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

Answer 2

Nie znalazłeś ich, bo jej w originalEvent. try: e.originalEvent.layerX e.originalEvent.layerY

O pageX i pageY nie są obliczenia samo. layerX jest lewą stroną obiektu od pierwszego rodzica względnego/absolutnego. pageX jest po lewej stronie obiektu ze strony.

Answer 3

Użyj layerX i layerY w FF i offsetX i offsetY we wszystkich innych przeglądarkach.

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

Działa to dobrze w firefox i innych.

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

Answer 5

Firefox rzeczywiście robisupportMouseEvent.offsetX i MouseEvent.offsetY po zwolnieniu 39,0, który jest uwalniany w july 2015.