HTML5 avec jQuery - e.offsetX n'est pas défini dans Firefox

Question

Dans ma page HTML5, j'ai un div avec mousemove événement comme suit:

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

Il fonctionne très bien avec Google Chrome. Mais dans Firefox, les deux sont de donner la valeur undefined. J'ai vérifié en utilisant Firebug, qui est, a enregistré l' e objet de la console. Les deux offsetX et offsetY sont undefined.

Lorsque j'ai cherché dans Google, il y avait une solution en disant que je devrais utiliser layerX et layerY, si les deux offsetX et offsetY ne sont pas définis. Mais à partir de Firebug, je n'étais pas capable de le trouver. Et j'avais moi-même donné un essai comme ceci:

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

Mais c'est aussi donner des undefined sous forme de valeurs.

Je suis en utilisant la plus récente de jQuery - v1.8.2. Et je suis en train de tester dans mon Firefox v14.0.1

Toutes les idées ou suggestions ? Merci à l'avance..

---

MODIFIER

Grâce à dystroy et vusan pour m'aider. La solution à ce problème est comme suit:

SOLUTION

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

Le crédit va à dystroy et vusan. Merci les gars. :)

Answer 1

Utilisez layerX et layerY en FF et offsetX et offsetY dans tous les autres navigateurs.

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

Essayez d’utiliser pageX et pageY pour Firefox et offsetX pour un autre navigateur.

Answer 3

Vous ne les avez pas trouvés parce que c'est dans l'originalEvent. essayez: e.originalEvent.layerX e.originalEvent.layerY

À propos de la pageX et de la pageY, ils ne calculent pas la même chose. layerX est la gauche de l'objet à partir du premier parent relatif / absolu. pageX est la gauche de l'objet de la page.