HTML5 with jQuery - e.offsetX is undefined in Firefox

Question

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?

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

not sure what version of Google Chrome you were using, but it seems to give an undefined object in version Chrome v26 also. — cartbeforehorse, May 03 '13 at 14:05
@cartbeforehorse: I'm using Chrome Version 26.0.1410.64 m. And it works fine. See it live: http://jsfiddle.net/EEftW/ — Akhilesh B Chandran, May 03 '13 at 18:22
I sure got sucked in. Using typescript and StronglyTyped jQuery definition files, I was led to believe OffsetX/Y were parts of jquery. Never realised they were optional and only included in certain browsers. Thanks for your post, you helped me find the problem in a sprawling mess of code. — fabspro, May 05 '13 at 08:46
This doesn't work for me in Firefox 30 - pageX and pageY are always 0 — B T, Jul 24 '14 at 19:21

vusan · Accepted Answer · 2015-08-05T12:02:45.287

20

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;

edited Aug 05 '15 at 12:02

answered Oct 03 '12 at 08:44

vusan

5,221
4
46
81

2

Thanks.. But what I wanted is relative to a container(`#canvas`). pageX/Y are relative to the `` element - http://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y – Akhilesh B Chandran Oct 03 '12 at 08:51
8

Use `var xInCanvas = e.pageX-$canvas.offset().left;` – Denys Séguret Oct 03 '12 at 08:58
4

Thanks guys. I got it working when I tried what @dystroy had suggested. The code is as follows: `if(e.offsetX==undefined) { xpos = e.pageX-$('#canvas').offset().left; ypos = e.pageY-$('#canvas').offset().top; } else { xpos = e.offsetX; ypos = e.offsetY; }` Thanks again guys :) – Akhilesh B Chandran Oct 03 '12 at 09:12
Check out [this answer](http://stackoverflow.com/a/14841138/24874) for a solution that doesn't require jQuery. – Drew Noakes Sep 29 '13 at 22:22
1

Although pageX and pageY work they do not answer the question directly. http://stackoverflow.com/a/20397642/11792 – Pavel Nikolov Dec 05 '13 at 10:36
pageX is not the same as offsetX – pronebird Dec 11 '14 at 14:10
it's `e.originalEvent.layerX` not `e.layerX`, see other answer(s). And yet no reason to have the same answer 3 times :) – huysentruitw Dec 15 '14 at 15:19
This answer doesn't work anymore because `e.offsetX` is always `0` and not `undefined` in Firefox. – Take Nov 25 '21 at 03:17

Pavel Nikolov · Answer 2 · 2013-12-05T14:30:27.137

20

Use layerX and layerY in FF and offsetX and offsetY in all other browsers.

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

edited Dec 05 '13 at 14:30

answered Dec 05 '13 at 10:35

Pavel Nikolov

9,401
5
43
55

1

This and the other answer specifying originalEvent need more upvotes. The "best answer" does provide a solution but these are more accurate as layerX and layerY are more equivalent to offsetX and offsetY. Thanks :) – James Hill Jul 31 '14 at 21:53

score 14 · Answer 3 · answered Jan 08 '13 at 09:00

You did not find them because its in the originalEvent. try: e.originalEvent.layerX e.originalEvent.layerY

About the pageX and pageY they are not calculating the same thing. layerX is the left of the object from the first relative/absolute parent. pageX is the left of the object from the page.

score 0 · Answer 4 · answered Nov 05 '15 at 10:58

0

This works fine in firefox and others.

var offsetRequired = (e.offsetX || e.pageX - $(e.target).offset().left);

answered Nov 05 '15 at 10:58

Stark Buttowski

1,799
2
10
21

score 0 · Answer 5 · answered Jul 12 '16 at 14:45

0

Firefox actually does support MouseEvent.offsetX and MouseEvent.offsetY after release 39.0, which is released in july 2015.

answered Jul 12 '16 at 14:45

Memet Olsen

4,578
5
40
50

But the values for offsetX/Y in Firefox are not the same as they are in Chrome. Need to convert them but don't know how. – scott Jul 12 '16 at 23:11
I'm getting the same values with the newest version of both browsers. – Memet Olsen Jul 13 '16 at 07:02
I have Chrome 49 because my Mac OS is 10.6.8. I can't use a newer version of Chrome until I update my OS (or my boss buys me a new machine). – scott Jul 13 '16 at 21:34

HTML5 with jQuery - e.offsetX is undefined in Firefox

5 Answers5

Linked