web-dev-qa-db-fra.com

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

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

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

Cela fonctionne bien avec Google Chrome. Mais dans Firefox, les deux donnent la valeur undefined. Je l'ai vérifié à l'aide de Firebug, c'est-à-dire que j'ai consigné l'objet e à la console. offsetX et offsetY s'avèrent être undefined.

Lorsque j'ai cherché dans Google, il y avait une solution disant que je devrais utiliser layerX et layerY, si offsetX et offsetY sont indéfinis . Et même je l'avais essayé comme ça:

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

Mais cela donne aussi undefined comme valeurs.

J'utilise la plus récente version de jQuery - v1.8.2. Et je teste dans Firefox v14.0.1

Des idées ou des suggestions?

MODIFIER

Merci à dystroy et vusan de m'aider. La solution au problème ci-dessus est la suivante:

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);
});
jqueryhtml5eventsundefined
58
Akhilesh B Chandran

Essayez d'utiliser layerX et layerY pour Firefox et offsetX pour un autre navigateur.

Si événement déclenché avec jQuery:

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

Si événement déclenché avec javascript:

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

Utilisez layerX et layerY dans 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);
});
19
Pavel Nikolov

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

À propos de la pageX et de la pageY, ils ne calculent pas la même chose.

14
Roy Shoa

Cela fonctionne très bien dans Firefox et autres.

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

Firefox en fait neprend en chargeMouseEvent.offsetX et MouseEvent.offsetY après la publication de la version 39.0, qui est publiée dans juillet 2015 .

0
Memet Olsen