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

在我的HTML5页面中,我有一个带有undefined事件的div,如下所示:

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

它可以与Google Chrome正常运行。 但是在Firefox中,两者都给出了undefined的值。我已经使用Firebug进行了检查,即将layerY对象记录到控制台。 发现offsetXoffsetY均为undefined

当我在Google中搜索时,有一个解决方案说,如果同时未定义offsetXoffsetY,则应使用undefinedlayerY。但是从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中进行测试

有什么想法或建议吗?


编辑

感谢销毁者和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 asked 2019-10-12T03:56:35Z
5个解决方案
19 votes

尝试对Firefox使用layerXlayerY,对其他浏览器使用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;
vusan answered 2019-10-12T03:57:02Z
19 votes

在FF中使用layerXlayerY,在所有其他浏览器中使用offsetXoffsetY

$('#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 answered 2019-10-12T03:57:28Z
14 votes

您找不到它们,因为它在originalEvent中。尝试:e.originalEvent.layerXe.originalEvent.layerY

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

Roy Shoa answered 2019-10-12T03:58:02Z
0 votes

这在Firefox和其他系统中效果很好。

var offsetRequired = (e.offsetX || e.pageX - $(e.target).offset().left);
Stark Buttowski answered 2019-10-12T03:58:30Z
0 votes

在2015年7月发行的39.0版本之后,Firefox实际上确实支持MouseEvent.offsetXMouseEvent.offsetY

Memet Olsen answered 2019-10-12T03:58:56Z
translate from https://stackoverflow.com:/questions/12704686/html5-with-jquery-e-offsetx-is-undefined-in-firefox