58

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

5 回答 5

20

尝试将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;
于 2012-10-03T08:44:17.930 回答
20

在 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);
});
于 2013-12-05T10:35:19.743 回答
14

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

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

于 2013-01-08T09:00:51.367 回答
0

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

var offsetRequired = (e.offsetX || e.pageX - $(e.target).offset().left);
于 2015-11-05T10:58:15.300 回答
0

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

于 2016-07-12T14:45:48.303 回答