HTML5与jQuery - e.offsetX在Firefox中未定义

Question

HTML5与jQuery - e.offsetX在Firefox中未定义

58

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

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

在谷歌浏览器中它工作得很好。但在火狐浏览器中，两者都返回值为undefined。我通过使用Firebug进行了检查，即将e对象记录到控制台中。发现offsetX和offsetY都是undefined。

当我在谷歌中搜索时，有一个解决方案说如果offsetX和offsetY都未定义，则应该使用layerX和layerY。但是从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);
});

- Akhilesh B Chandran

不确定您使用的是哪个版本的Google Chrome，但在Chrome v26版本中似乎会出现未定义的对象。 - cartbeforehorse

@cartbeforehorse：我正在使用Chrome版本26.0.1410.64 m。它运行良好。请查看实时演示：http://jsfiddle.net/EEftW/ - Akhilesh B Chandran

1

我确实被吸引了进去。使用TypeScript和StronglyTyped jQuery定义文件，我曾经认为OffsetX/Y是jQuery的一部分。从未意识到它们是可选的，并且只包含在某些浏览器中。感谢您的帖子，您帮助我在一堆混乱的代码中找到了问题所在。 - fabspro

1

在Firefox中对我不起作用。 - aaronsnoswell

这在Firefox 30中对我不起作用 - pageX和pageY始终为0。 - B T

哇，有点惊讶jQuery没有标准化这个！ - Michael Scheper

5个回答

20

在 Firefox 中使用 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);
});

- Pavel Nikolov

1

这个回答和另一个指定originalEvent的回答需要更多的赞。 "最佳答案"确实提供了解决方案，但是这些答案更准确，因为layerX和layerY更等同于offsetX和offsetY。谢谢 :) - James Hill

14

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

关于pageX和pageY，它们不计算相同的内容。 layerX是该对象相对于第一个relative/absolute父元素的左侧位置。 pageX是该对象相对于页面的左侧位置。

- Roy Shoa

0

这在Firefox和其他浏览器中都可以正常工作。

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

- Stark Buttowski

0

实际上，自 Firefox 39.0 版本（发布于2015年7月）以后，Firefox已经支持MouseEvent.offsetX和MouseEvent.offsetY。

- Memet Olsen

但是在Firefox中，offsetX/Y的值与Chrome中的不同。需要将它们转换，但不知道如何转换。 - scott

我在最新版本的两个浏览器中得到了相同的值。 - Memet Olsen

我使用Chrome 49，因为我的Mac OS是10.6.8。除非我更新操作系统（或者老板给我买一台新机器），否则我无法使用更新版本的Chrome。 - scott

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vusan · Accepted Answer

对于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;