Akhilesh B Chandran Akhilesh B Chandran - 4 months ago 22
jQuery Question

HTML5 with jQuery - e.offsetX is undefined in Firefox

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. :)

Answer

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;
Comments