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

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

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

Google Chrome可以正常工作。 但在Firefox中，这两个都是undefined的值。 我已经通过使用Firebug来检查它，也就是将e对象logging到控制台。 发现offsetX和offsetY都是undefined 。

当我在Googlesearch时，有一个解决scheme说如果offsetX和offsetY都是未定义的，我应该使用layerX和layerY 。 但从Firebug，我无法find它。 甚至我也试过这样的尝试：

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

但是，这也给undefined的值。

我正在使用最新的jQuery – v1.8.2。 我正在testing我的Firefox v14.0.1

任何想法或build议？

---

编辑

感谢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

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

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

Answer 3

你没有find他们，因为它在原来的事件。 尝试：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年7月发布的版本39.0之后支持 MouseEvent.offsetX和MouseEvent.offsetY 。