Jump to content

Firefox / Chrome = Numbers but in IE = NaN ?


astralaaron
 Share

Recommended Posts

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 by astralaaron
Link to comment
Share on other sites

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 by astralaaron
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...