58

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);
});
6
  • not sure what version of Google Chrome you were using, but it seems to give an undefined object in version Chrome v26 also. May 3, 2013 at 14:05
  • @cartbeforehorse: I'm using Chrome Version 26.0.1410.64 m. And it works fine. See it live: jsfiddle.net/EEftW May 3, 2013 at 18:22
  • 1
    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 5, 2013 at 8:46
  • 1
    Doesn't work for me in Firefox Dec 1, 2013 at 10:32
  • This doesn't work for me in Firefox 30 - pageX and pageY are always 0
    – B T
    Jul 24, 2014 at 19:21

5 Answers 5

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;
8
  • 2
    Thanks.. But what I wanted is relative to a container(#canvas). pageX/Y are relative to the <html> element - stackoverflow.com/questions/6073505/… Oct 3, 2012 at 8:51
  • 8
    Use var xInCanvas = e.pageX-$canvas.offset().left; Oct 3, 2012 at 8: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 :) Oct 3, 2012 at 9:12
  • Check out this answer for a solution that doesn't require jQuery. Sep 29, 2013 at 22:22
  • 1
    Although pageX and pageY work they do not answer the question directly. stackoverflow.com/a/20397642/11792 Dec 5, 2013 at 10:36
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);
});
1
  • 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, 2014 at 21:53
14

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.

0

This works fine in firefox and others.

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

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

3
  • 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, 2016 at 23:11
  • I'm getting the same values with the newest version of both browsers. Jul 13, 2016 at 7: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, 2016 at 21:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.