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

在我的HTML5页面中，我有一个带有

mousemove

事件的div，如下所示：

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

它可以与谷歌浏览器配合使用。但是在Firefox中，这两个函数都给出了

未定义的值。我已经使用Firebug进行了检查，也就是说，将
e
对象记录到控制台。发现
offsetX
和
offsetY
都是
未定义的

当我在谷歌搜索时，有一个解决方案说，如果
offsetX
和
offsetY
都未定义，我应该使用
layerX
和
layerY
。
但是从萤火虫那里，我找不到它。甚至我也试过这样做：

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

但这也将
未定义的
作为值

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

有什么想法或建议吗


编辑

感谢dystroy和vusan帮助我。上述问题的解决办法如下：

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

解决方案

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

尝试在Firefox上使用
layerX
和
layerY
，在其他浏览器上使用
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;

你没有找到它们，因为它在原始事件中。
尝试：
e、 OriginaleEvent.layerX
e、 原始事件

关于pageX和pageY，他们计算的不是同一件事。
layerX是第一个相对/绝对父对象的左侧。
pageX位于页面对象的左侧。
在FF中使用
layerX
和
layerY
，在所有其他浏览器中使用
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);
});

这在firefox和其他浏览器中运行良好

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

Firefox在年发布的39.0版之后，实际上已经发布了
MouseEvent.offsetX
和
MouseEvent.offsetY
。
谢谢。。但我想要的是相对于容器（
#canvas
）。pageX/Y相对于
元素-Use
var xInCanvas=e.pageX-$canvas.offset（）.leftif（e.offsetX==undefined）{xpos=e.pageX-$（'#canvas'）.offset（）.left；ypos=e.pageY-$（'#canvas'）.offset（）.top；}else{xpos=e.offsetX；ypos=e.offsetY；}
再次感谢各位：）查看一个不需要jQuery的解决方案。尽管pageX和pageY可以工作，但它们不能直接回答问题。不确定您使用的是哪个版本的Google Chrome，但它似乎在Chrome v26版本中也给出了一个未定义的对象。@cartbeforehorse:我使用的是Chrome 26.0.1410.64 m版本。而且效果很好。现场观看：我真的被吸进去了。使用typescript和StronglyTypedjQuery定义文件，我相信OffsetX/Y是jQuery的一部分。从未意识到它们是可选的，只包含在某些浏览器中。谢谢你的帖子，你帮我在杂乱无章的代码中找到了问题。Firefox对我不起作用这在Firefox 30中对我不起作用-pageX和pageY总是0这和另一个指定OriginaleEvent的答案需要更多的投票。“最佳答案”确实提供了一个解决方案，但由于layerX和layerY更等同于offsetX和offsetY，因此更准确。谢谢：）但是Firefox中offsetX/Y的值与Chrome中的不同。需要转换，但不知道如何转换。我在两个浏览器的最新版本中得到相同的值。我有Chrome 49，因为我的Mac OS是10.6.8。在我更新操作系统（或者老板给我买了一台新机器）之前，我不能使用更新版本的Chrome。