Stop Observing Events with JS Prototype not working with .bind(this)

Question

I'm working on a Javascript class based on the Prototype library. This class needs to observe an event to perform a drag operation (the current drag-drop controls aren't right for this situation), but I'm having problems making it stop observing the events.

Here's a sample that causes this problem:

var TestClass = Class.create({
    initialize: function(element) {
        this.element = element;
        Event.observe(element, 'mousedown', function() {
            Event.observe(window, 'mousemove', this.updateDrag.bind(this));
            Event.observe(window, 'mouseup', this.stopDrag.bind(this));
        });
    },
    updateDrag: function(event) {
        var x = Event.pointerX(event);
        var y = Event.pointerY(event);
        this.element.style.top = y + 'px';
        this.element.style.left = x + 'px';
    },
    stopDrag: function(event) {
        console.log("stopping drag");
        Event.stopObserving(window, 'mousemove', this.updateDrag.bind(this));
        Event.stopObserving(window, 'mouseup', this.stopDrag.bind(this));
    }
});

Without .bind(this) then this.element is undefined, but with it the events don't stop being observed (the console output does occur though).

Answer 1

bind returns a new function reference every time you call it (that's its job :-) ), and stopObserving will only unhook the handler if the function reference is an === match.

To fix this, remember the event handler you bound as a property and then use that property with stopObserving. Or, if you're in charge of that element, you can unhook all handlers for the mousemove and mouseup events by simply leaving off the third parameter. (See the linked docs for more about leaving off parameters to stopObserving).

So either:

initialize: function(element) {
    this.element = element;
    this.boundUpdateDrag = this.updateDrag.bind(this);
    this.boundStopDrag = this.stopDrag.bind(this);
    Event.observe(element, 'mousedown', function() {
        // Off-topic, but see note at end of answer, unrelated bug here
        Event.observe(window, 'mousemove', this.boundUpdateDrag);
        Event.observe(window, 'mouseup', this.boundStopDrag);
    });
},
stopDrag: function(event) {
    console.log("stopping drag");
    Event.stopObserving(window, 'mousemove', this.boundUpdateDrag);
    Event.stopObserving(window, 'mouseup', this.boundStopDrag);
}

Or just

stopDrag: function(event) {
    console.log("stopping drag");
    Event.stopObserving(window, 'mousemove');
    Event.stopObserving(window, 'mouseup');
}

But note that the latter removes all handlers for those events on that element (well, the ones hooked up via Prototype).

---

Off-topic, but note that there's a bug in your initialize function: It's using this in the handler for mousedown, but not ensuring that this is set to what it should be set to. You'll need to bind that anonymous function, or use a variable in initialize to take advantage of the fact that that anonymous function is a closure.

So either use bind again:

initialize: function(element) {
    this.element = element;
    this.boundUpdateDrag = this.updateDrag.bind(this);
    this.boundStopDrag = this.stopDrag.bind(this);
    Event.observe(element, 'mousedown', (function() {
        Event.observe(window, 'mousemove', this.boundUpdateDrag);
        Event.observe(window, 'mouseup', this.boundStopDrag);
    }).bind(this));
},

Or use the fact you're defining a closure anyway:

initialize: function(element) {
    var self;

    self = this; // Remember 'this' on a variable that will be in scope for the closure
    this.element = element;
    this.boundUpdateDrag = this.updateDrag.bind(this);
    this.boundStopDrag = this.stopDrag.bind(this);
    Event.observe(element, 'mousedown', function() {
        // Note we're using 'self' rather than 'this'
        Event.observe(window, 'mousemove', self.boundUpdateDrag);
        Event.observe(window, 'mouseup', self.boundStopDrag);
    });
},