Javascript Closure/Event Handling Nightmare

Question

I am using the ovi maps API and I have a polyline with an event handler. The event handler looks like the following

 SomeClass = Base.extend({
    _clickFunction: function(evt) {
          alert(this.someBaseClassMethod() + 'x: ' + evt.targetX+ 'y:'+ evt.targetY);
    },
    go: function(){
          myClickableThing.addListener('click', this._clickFunction.bind(this));
    }
   }

The first time I click my thing I get X and Y that are correct for the pixel position of the cursor and an accurate timestamp. For every subsequent click on the same polyLine I get the exact same X,Y,and Timestamp. Does anyone have any thoughts or a workaround?

what does this line do this._clickFunction.bind(this)? never seen this before.. — Baz1nga, Aug 12 '11 at 17:42
Why do you need to bind `this._clickFunction.bind(this));`? It doesn't look like the function is using the `this` object, so you should be able to just use `this._clickFunction`. — Peter Olson, Aug 12 '11 at 17:44
assuming your _clickFunction is private to this object.. shouldnt you just give a reference to that function as the eventHandler. i.e myClickableThing.addListener('click', _clickFunction); — Baz1nga, Aug 12 '11 at 17:44
This particular app is using Base.js. I think that is used to bind a class level function as a contextual reference to containing this object/function so you can use this in _clickFunction to refer to its containing class. Basically so this mimicks what this would do in java — nsfyn55, Aug 12 '11 at 17:45

score 0 · Answer 1 · answered Aug 12 '11 at 17:56

Anyways I am not sure of the OVImap API but I am guessing it will pass its own event object to you to the handler method. see if that gives you the right values.

your listener function will be something like:

myClickableThing.addListener('click', function(event){this._clickFunction(event)});

Hope this helps.

On a side note wEll we ran into a similar issue on google maps and one particular browser where in the evt variable was not scoped correctly or something of that sort.

I am not sure if that is your problem.

score 0 · Accepted Answer · answered Aug 15 '11 at 13:13

First off, thanks for all those that answered. I did manage to solve this problem although I can't tell you why it didn't work in the first place(If anyone regularly fishes around in the ECMAscript standard please feel free to contact me). The issue was definitely this._clickFunction.bind(this)). For what ever reason this creates a closure that retains the evt object. The solution(as some of you suggested in the comments) was simply to work around that line by setting the function up in the constructor.

Original:

   SomeClass = Base.extend({
    _clickFunction: function(evt) {
          alert(this.someBaseClassMethod() + 'x: ' + evt.targetX+ 'y:'+ evt.targetY);
    },
    go: function(){
          myClickableThing.addListener('click', this._clickFunction.bind(this));
    }
   }

Fixed Version:

  SomeClass = Base.extend({
    _clickFunction:null,
    constructor: function(){
      this._clickFunction = function(evt) {
          alert(this.someBaseClassMethod() + 'x: ' + evt.targetX+ 'y:'+ evt.targetY);
      }
    },
    go: function(){
          myClickableThing.addListener('click', this._clickFunction);
    }
   }

Javascript Closure/Event Handling Nightmare

2 Answers2