Firefox / Chrome = Numbers but in IE = NaN ?

[astralaaron]

I am running into an issue with IE... I have a prototype attached to my canvas which returns the current mouse position. It is working fine in Firefox, and I have also had it working fine with IE in a different project...but for the life of me I can't catch what I am doing wrong in this case.

 

here is my prototype that is attached to my canvas element:

this.mouseXY = function (event){	var totalOffsetX = 0;	var totalOffsetY = 0;	var canvasX = 0;	var canvasY = 0;	var canvas = this;	do{	totalOffsetX += canvas.offsetLeft;	totalOffsetY += canvas.offsetTop;	}	while(canvas = canvas.offsetParent)	canvasX = event.pageX - totalOffsetX;	canvasY = event.pageY - totalOffsetY;return {'x':canvasX, 'y':canvasY}}

when I grab the X/Y with my mouse object which looks like

this.mouse = {'x':0, 'y':0};

 

in Firefox I am getting numbers, but in IE it is returning NaN / NaN... any ideas? I have tried using parseInt() with no luck..I do understand that NaN is a value which a number type can have.. any insight is greatly appreciated...

 

EDIT:

 

the following is how the prototype is implemented, maybe there is an issue here?

	HTMLCanvasElement.prototype.xy = e.mouseXY;	if(window.attachEvent) {		x.canvas.attachEvent('onclick', e.mouseClick);		x.canvas.attachEvent('onmousemove', e.mouseMove);	}	else	{			x.canvas.addEventListener('click', e.mouseClick, false);		x.canvas.addEventListener('mousemove', e.mouseMove, false);	}

Edited March 7, 2014 by astralaaron

[Ingolme]

Read this article: http://www.quirksmode.org/js/events_properties.html#position

 

Remember that Internet Explorer needs the global window.event property, so add this into your function:

if(!event) event = window.event

[astralaaron]

edit

Edited March 8, 2014 by astralaaron

[astralaaron]

any idea why this wouldn't be working? I am still getting NaN for the x and y in IE.

 

I tried

if(!event) event = window.event;

and

if(!event) var event = window.event;  // as shown on the link you sent me

here is the function:

this.mouseXY = function (event){	if(!event) var event = window.event;	var totalOffsetX = 0;	var totalOffsetY = 0;	var canvasX = 0;	var canvasY = 0;	var canvas = this;	do{	totalOffsetX += canvas.offsetLeft;	totalOffsetY += canvas.offsetTop;	}	while(canvas = canvas.offsetParent)	canvasX = event.pageX - totalOffsetX;	canvasY = event.pageY - totalOffsetY;return {'x':canvasX, 'y':canvasY}}

does it make any difference that this function is a prototype of the canvas element?

 

It is also called from another event listener 'mousemove' and 'click'

this.mouseMove = function(event) {	if(!event) var event = window.event;	x.mouse = x.canvas.xy(event);	console.log(x.mouse.x + ' ' + x.mouse.y);}

Edited March 8, 2014 by astralaaron

[astralaaron]

Is there an issue with the window.event and having the IE developer tools open? I tried on a computer with IE10 and it worked, I realized that developer tools / console were closed and I hadn't tried that previously. Then I opened the developer tools to test IE9 and it doesn't work. Mouse x y is NaN... I need to be able to test this on IE9 is there any other way besides the developer tools browser version setting?

[dsonesuk]

Might be conflict with using 'event' twice the

 

link uses function(e) you use function(event)

 

then you have

 

if(!event) var event = window.event;

 

window.event will equal var event which will be new with null value, so window.event equals null

 

compared to

 

if(!e) var e = window.event;

 

e will equal window.event

[astralaaron]

Might be conflict with using 'event' twice the

 

thanks for the response but I actually thought that right after posting and it doesnt fix the problem

[astralaaron]

well, It works in IE11. My only concern now is that when I use IE11 and I browser simulate in IE10 and IE9 it stops working... is this because it doesnt work when developer tools are on, or it actually doesn't work in IE10 and 9???

[astralaaron]

is it safe to say that it is working in IE10 / 9 if it is working in 11? Like I said when I try to use the document mode in developer tools it stops working..I read somewhere while searching Google, it said that "You can't trust the browser developer tools document mode, you need to test on a legitimate copy"

 

Is there a way to install old versions of IE?

[astralaaron]

I was just able to test on a legitimate IE10 and it is not working..for some reason the mouse is NaN...i just dont get it

[Ingolme]

Your code doesn't resemble the one from the article I linked you to. http://www.quirksmode.org/js/events_properties.html#position

Read the article again and read their explanations.

[astralaaron]

Thanks for everyone who took time trying to figure this out. It turns out my problem was how I was attaching the mousemove event to the canvas. I will post the fix later in case anyone is interested.