带有jQuery的HTML5 - 在Firefox中未定义e.offsetX

Question

在我的HTML5页面中,我有一个div mousemove事件如下:

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

它适用于谷歌浏览器.但在Firefox中,两者都给出了价值undefined.我已经使用Firebug进行了检查,即将e对象记录到控制台.这两个offsetX和offsetY被发现undefined.

当我在谷歌搜索,有一个解决方案,说我应该使用layerX和layerY,如果这两个offsetX和offsetY是不确定的.但是从Firebug,我无法找到它.甚至我试过这样的尝试:

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

但这也是undefined值得的.

我正在使用最新的jQuery - v1.8.2.我正在使用我的Firefox v14.0.1进行测试

任何想法或建议？

---

编辑

感谢dystroy和vusan帮助我.上述问题的解决方案如下:

解

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

尝试使用layerX和layerYFirefox和offsetX其他浏览器.

如果使用jquery触发事件:

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

如果使用javascript触发事件:

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

Answer 2

使用layerX和layerY在FF和offsetX与offsetY所有其他浏览器.

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

你没有找到它们,因为它在原始事件中.尝试:e.originalEvent.layerX e.originalEvent.layerY

关于pageX和pageY他们没有计算同样的事情.layerX是来自第一个相对/绝对父对象的对象的左侧.pageX是页面中对象的左侧.