astralaaron Posted March 7, 2014 Share Posted March 7, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
Ingolme Posted March 7, 2014 Share Posted March 7, 2014 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 Link to comment Share on other sites More sharing options...
astralaaron Posted March 7, 2014 Author Share Posted March 7, 2014 (edited) edit Edited March 8, 2014 by astralaaron Link to comment Share on other sites More sharing options...
astralaaron Posted March 8, 2014 Author Share Posted March 8, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
astralaaron Posted March 8, 2014 Author Share Posted March 8, 2014 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 More sharing options...
dsonesuk Posted March 8, 2014 Share Posted March 8, 2014 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 More sharing options...
astralaaron Posted March 9, 2014 Author Share Posted March 9, 2014 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 Link to comment Share on other sites More sharing options...
astralaaron Posted March 9, 2014 Author Share Posted March 9, 2014 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??? Link to comment Share on other sites More sharing options...
astralaaron Posted March 9, 2014 Author Share Posted March 9, 2014 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 More sharing options...
astralaaron Posted March 10, 2014 Author Share Posted March 10, 2014 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 Link to comment Share on other sites More sharing options...
Ingolme Posted March 10, 2014 Share Posted March 10, 2014 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. Link to comment Share on other sites More sharing options...
astralaaron Posted March 11, 2014 Author Share Posted March 11, 2014 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now