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

【问题标题】：HTML5 with jQuery - e.offsetX is undefined in Firefox带有 jQuery 的 HTML5 - e.offsetX 在 Firefox 中未定义
【发布时间】：2012-10-03 08:35:01
【问题描述】：

在我的 HTML5 页面中，我有一个带有 mousemove 事件的 div，如下所示：

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

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

当我在 Google 中搜索时，有一个解决方案说我应该使用 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);
});

【问题讨论】：

不确定您使用的是哪个版本的 Google Chrome，但似乎在 Chrome v26 版本中也给出了未定义的对象。
@cartbeforehorse：我使用的是 Chrome 版本 26.0.1410.64 m。它工作正常。现场观看：jsfiddle.net/EEftW
我确实被吸引了。使用 typescript 和 StronglyTyped jQuery 定义文件，我被引导相信 OffsetX/Y 是 jquery 的一部分。从来没有意识到它们是可选的，并且只包含在某些浏览器中。感谢您的帖子，您帮我在一堆乱七八糟的代码中找到了问题。
在 Firefox 中不适合我
这在 Firefox 30 中对我不起作用 - pageX 和 pageY 始终为 0

标签： jquery html events undefined

【解决方案1】：

尝试在 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;

【讨论】：

谢谢.. 但我想要的是相对于容器（#canvas）。 pageX/Y 相对于 <html> 元素 - stackoverflow.com/questions/6073505/…
使用var xInCanvas = e.pageX-$canvas.offset().left;
谢谢大家。当我尝试@dystroy 的建议时，我得到了它的工作。代码如下：if(e.offsetX==undefined) { xpos = e.pageX-$('#canvas').offset().left; ypos = e.pageY-$('#canvas').offset().top; } else { xpos = e.offsetX; ypos = e.offsetY; }再次感谢大家:)
查看this answer 以获得不需要 jQuery 的解决方案。
虽然 pageX 和 pageY 有效，但它们并不能直接回答问题。 stackoverflow.com/a/20397642/11792

【解决方案2】：

在 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);
});

【讨论】：

这个和其他指定 originalEvent 的答案需要更多的支持。 “最佳答案”确实提供了一个解决方案，但这些更准确，因为 layerX 和 layerY 更等同于 offsetX 和 offsetY。谢谢:)

【解决方案3】：

您没有找到它们，因为它在 originalEvent 中。尝试： e.originalEvent.layerX e.originalEvent.layerY

关于 pageX 和 pageY 他们计算的不是同一个东西。 layerX 是第一个相对/绝对父对象的左侧。 pageX 是页面对象的左侧。

【讨论】：

【解决方案4】：

这在 Firefox 和其他软件中运行良好。

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

【讨论】：

【解决方案5】：

Firefox 实际上确实 support MouseEvent.offsetX 和 MouseEvent.offsetY 在发布 39.0 之后，在 july 2015 中发布。

【讨论】：

但是 Firefox 中 offsetX/Y 的值与 Chrome 中的不同。需要转换它们，但不知道如何。
我在两个浏览器的最新版本中得到了相同的值。
我有 Chrome 49，因为我的 Mac OS 是 10.6.8。在我更新我的操作系统（或者我的老板给我买了一台新机器）之前，我不能使用更新版本的 Chrome。