HTML5 with jQuery – e.offsetX在Firefox中未定义

前端之家收集整理的这篇文章主要介绍了HTML5 with jQuery – e.offsetX在Firefox中未定义前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在我的HTML5页面,我有一个与mousemove事件的div如下:
$('#canvas').mousemove(function(e){
            xpos = e.offsetX;
            ypos = e.offsetY;
            $('#mouse').html("X : " + xpos + " ; Y : " + ypos);
        });

它适用于谷歌Chrome浏览器。但在Firefox中,两者都给出了未定义的值。我已经通过使用Firebug,即,记录e对象到控制台检查。发现offsetX和offsetY是未定义的。

当我在Google搜索时,有一个解决方案,我应该使用layerX和layerY,如果offsetX和offsetY是未定义的。
但是从Firebug,我不能找到它。甚至我给了它一个尝试这样:

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

但这也是未定义的价值观。

我使用最新的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);
});

信用到dystroy和vusan。感谢你们。

猜你在找的HTML5相关文章