Question

I’m creating a small tooltip application and I’m having trouble. I’m trying to add an event to the document, but am having trouble referencing the function that needs to be executed. Here is the code:

var Note, note;
(function () {
    'use strict';

    // Helper functions
    function addEvent(to, type, fn) {
        if (to.addEventListener) {
            to.addEventListener(type, fn, false);
        } else if (to.attachEvent) {
            to.attachEvent('on' + type, fn);
        } else {
            to['on' + type] = fn;
        }
    }

    // Temporary constructor
    function Temp() {
        this.dragging = false;

        return this;
    }

    Temp.prototype = {
        listen: function () {
            this.dragging = true;
        },
        drag: function () {
            alert('hi 1');
            if (!this.dragging) return;
            alert('hi 2');
        },
        create: function () {
            // unimportant code ...

            addEvent(document, 'mousedown', this.drag);

            // unimportant code ...
        }
    };

    window.Note = Temp;
}());

note = new Note();
note.create(); // the note is created as planned
note.listen(); // alert(note.dragging) yields true

If there are small mistakes in the code I don’t think those are the problem, the code on my system passes JSLint (I know that doesn’t guarantee correctness). Neither of the alerts alert their arguments; I suspect, though, that the problem is assigning ‘this.drag’ as the function reference to the event handler. Are there any workarounds for this?

Thank you all for your time!

Answer 1

Try next:

(function () {
    'use strict';

// Helper functions
function addEvent(to, type, fn) {
    if (to.addEventListener) to.addEventListener(type, fn, false);
    else if (to.attachEvent) to.attachEvent('on' + type, fn);
    else to['on' + type] = fn; // this is bad. this do not support multiple handlers
}

// Temporary constructor
function Temp() {
    this.dragging = false;
}

Temp.prototype = {
    constructor: Temp, // needed because it is removed when used Temp.prototype={...}
    listen: function () {
        this.dragging = true;
    },
    drag: function () {
        alert('hi 1');
        if (!this.dragging) return;
        alert('hi 2');
    },
    create: function () {
        //addEvent(document, 'mousedown', this.drag);
        addEvent(document, 'mousedown', this.drag.bind(this));
        // or in older maner (when .bind() not implemented):
        //var self=this;
        //addEvent(document, 'mousedown', function(){self.drag();});
    }
};

window.Note = Temp;
})();

var note = new Note();
note.create(); // the note is created as planned
note.listen(); // alert(note.dragging) yields true