HTML5与jQuery - e.offsetX在Firefox中未定义 [英] HTML5 with jQuery - e.offsetX is undefined in Firefox

问题描述

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

 code $ $（'＃canvas'）mousemove（function（e）{
 xpos = e.offsetX; 
 ypos = e.offsetY; 
 $（'＃mouse' ）.html（X：+ xpos +; Y：+ ypos）; 
}）; 
  

它适用于Google Chrome。但是在Firefox中，两者都赋值 undefined 。我已经使用Firebug进行了检查，也就是将 e 对象记录到控制台。 offsetX 和 offsetY 被发现为未定义。 / p>

当我在Google搜索时，有一个解决方案说我应该使用 layerX 和 layerY ，如果 offsetX 和 offsetY 均未定义。
但是从Firebug，我无法找到它。即使我给了它这样的尝试：

  xpos =（e.offsetX == undefined）？e.layerX： e.offsetX; 
 ypos =（e.offsetY == undefined）？e.layerY：e.offsetY; 
  

但这也是将$ code> undefined 作为值。

我正在使用最新的jQuery - v1.8.2。我在Firefox v14.0.1中测试

任何想法或建议？感谢提前..

---

编辑

$ b $感谢dystroy和vusan帮助我。解决上述问题的方法如下：

解决方案

  $（'＃canvas'）。mousemove（function（e）{
 $（'＃cursor'）。show（）; 
 if（e.offsetX == undefined ）//这适用于Firefox 
 {
 xpos = e.pageX  -  $（'＃canvas'）。offset（）。left; 
 ypos = e.pageY  -  $（'＃画布'）。offset（）。top; 
} 
 else //在Google Chrome中工作
 {
 xpos = e.offsetX; 
 ypos = e.offsetY ; 
} 
 $（'＃mouse'）。html（X：+ xpos +; Y：+ ypos）; 
}）; 
  

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

解决方案

尝试使用 layerX 和对于Firefox而言，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; 
  

In my HTML5 page, I have a div with mousemove event as follows:

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

It works fine with Google Chrome. But in Firefox, both the are giving the value undefined. I have checked it by using Firebug, that is, logged the e object to console. Both offsetX and offsetY are found to be undefined.

When I searched in Google, there was a solution saying I should use layerX and layerY, if both offsetX and offsetY are undefined. But from Firebug, I was not able to find it. And even I had given it a try like this:

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

But that's also giving undefined as values.

I am using the most recent jQuery - v1.8.2. And I am testing in my Firefox v14.0.1

Any ideas or suggestions ? Thanks in advance..

---

EDIT

Thanks to dystroy and vusan for helping me. The solution to the above issue is as follows:

SOLUTION

$('#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);
});

The credit goes to dystroy and vusan. Thank you guys. :)

解决方案

Try using layerX and layerY for Firefox and offsetX for other browser.

If event fired with jquery:

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

If event fired with javascript:

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

这篇关于HTML5与jQuery - e.offsetX在Firefox中未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！