Question

I’m trying to improve my mouse event knowledge so this question is about why what I’m doing isn’t working more than whether I could use a drag and drop module.

I’m using Dojo and I’ve connected to mousedown and mouseup events. When there is a mousedown event that’s not a right click, I set up a connection for mousemove. On the subsequent mouseup event I disconnect that event. This is what the code looks like:
EDIT (made what should be a self contained example)

obj = {

    init: function(){
        var c;
        dojo.connect(dojo.doc, "mousedown", this, function(evt){
            this.down(evt);
            if(evt.button != dojo.mouseButtons.RIGHT){
                this._isDown = true;
                c = dojo.connect(dojo.doc, "mousemove", this, "drag");
            }
        });
        dojo.connect(dojo.doc, "mouseup", this, function(evt){
            dojo.disconnect(c);

            this._isDown = false;
            this.up(evt);
        });
    },//end init

    drag: function(evt){
        console.log("Mouse drag",evt);
    },

    up: function(evt){
        console.log("Mouse up",evt);
    },

    down: function(evt){
        console.log("Mouse down",evt);
    }
}//end obj

EDIT: to try this out, inject dojo on any page (with an img) with the console and then create this obj and run obj.init(). Inject with 1.5:

document.documentElement.firstChild
    .appendChild(document.createElement("script"))
    .src='http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js';

It looks symmetric to me and works fine if I click over most of the document. However if I click on an icon and drag it, the “drag” function is called only once (the connection should have made it so every movement of the cursor called it), and the mouseup event isn’t called when I release the mouse.

Then next time I mousedown it overwrites c with a new connection, making it so I can’t ever disconnect the previous one and thus what I intended to only be active for dragging becomes a permanent event.

A bad solution I’ve implemented is disconnecting before connecting in the “mousedown” connection. That makes sure I don’t get permanent calls to “drag” but still leaves me with rogue calls to “drag” until I click again to unset it.

Any tips to why this is happening?

Answer 1

Figured it out – apparently Firefox and other browsers have default handling of img clicks so by including dojo.stopEvent(evt) in each event listener it worked as expected.