jquery - 带有 jQ​​uery 的 HTML5 - e.offsetX 在 Firefox 中未定义

Question

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

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

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

当我在谷歌搜索时，有一个解决方案说我应该使用layerXand 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

尝试将layerXandlayerY用于 Firefox 和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

在 FF 和所有其他浏览器中使用layerXand 。layerYoffsetXoffsetY

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

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

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

Answer 4

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

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

Answer 5

Firefox 实际上支持 2015 MouseEvent.offsetX年7 月MouseEvent.offsetY发布的 39.0 之后的版本。