GBeebe Posted March 10, 2014 Share Posted March 10, 2014 First off, Hi. I've been a member for a while, but this is my first posted question. I've been able to google my answers thus far, however I'm now stumped... I'm working on a level editor for a game, which has multiple canvases (tileset, map, objects, etc...). I figured, instead of writing separate event listeners for each canvas, I'd write a black box styled function that had all the code I needed, however, I'm not being quite successful:<html> <head> <title>test</title> </head> <body> <div id="textOut"></div> <div id="boxTest" style="width: 300px; height: 300px; background-color: #000000;"> </div> <script type="text/javascript"> function addListener(element) { //holds the mouse coords on this element this.mouseX = 0; //I want these to be set by the mouseMove event. this.mouseY = 0; this.self = this; //the mouse move listener this.mouseMove = function(event) { //i tried this.that.mouseX (set below) but it gives me an error. self.mouseX = event.x; //doesn't throw an error, but doesn't change the desired variables. self.mouseY = event.y; } //this is a little trick that works with image onloads, but apparently not with listeners this.mouseMove.that = this; //attach listeners to the element element.addEventListener('mousemove', this.mouseMove, false); } //create the listener var listen = new addListener(document.getElementById('boxTest')); //supposed to display the mouse coords on boxTest in textOut. function hear() { document.getElementById('textOut').innerHTML = listen.mouseX + ", " + listen.mouseY; setTimeout(hear, 10); } hear(); </script> </body></html> My issue here is, each instance has it's own mouseX and mouseY, but I can't figure out how to get the listener to assign the variables. A little help here? Thanks in advance, Gary. Quote Link to comment Share on other sites More sharing options...
GBeebe Posted March 11, 2014 Author Share Posted March 11, 2014 ... I 'kinda' solved it, I guess. I just applied the variables to the element, but I've read that it's not a proper thing to do...<html> <head> <title>test</title> </head> <body> <div id="textOut"></div> <div id="boxTest" style="width: 300px; height: 300px; background-color: #000000;"> </div> <script type="text/javascript"> function addListener(element) { element.mouseX = 0; element.mouseY = 0; element.onmousemove = function(event) { this.mouseX = event.x - this.offsetLeft; this.mouseY = event.y - this.offsetTop; } } //create the listener var e = document.getElementById('boxTest'); addListener(e); function hear() { document.getElementById('textOut').innerHTML = e.mouseX + ", " + e.mouseY; setTimeout(hear, 10); } hear(); </script> </body></html> Quote Link to comment Share on other sites More sharing options...
spacejack Posted March 11, 2014 Share Posted March 11, 2014 Your first try was close, but has a few mistakes. I think you need something more like this: function addListener(element) { //holds the mouse coords on this element this.mouseX = 0; //I want these to be set by the mouseMove event. this.mouseY = 0; //attach listeners to the element var that = this; element.addEventListener( 'mousemove', function(e) { that.mouseX = e.clientX; that.mouseY = e.clientY; }, false );} The thing to understand is that in an event handler function, 'this' refers to the element firing the event. However, within an anonymous function you still have access to the local variables within the scope of the outer function - even after that function has exited, those variables will be remembered. So inside the event handler, you can still access the 'that' variable, which we previously assigned to the object we want to reference. GBeebe 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.