Question

I am writing a plugin that creates a select marquee box when the mouse is clicked on a canvas div. So far i’ve written the plugin with the click() and mousemove() events adjacent to each other in the code (i dont know of any way to embed events inside other events). But this becomes a problem when the mouse moves over the canvas before a click. Does anyone know how to initialize a mousemove handler with a click?

Here is the code i have written so far:

$.fn.createBox = function(id) {
        $(id).css({
            cursor:'crosshair'
        });

        $(id).click(function(e) {
            var clickLocX = e.pageX;
            var clickLocY = e.pageY;
            $('<div>').attr({
                'class':'newBox',
                'ctr':'on'
            })
            .css({
                top:clickLocY,
                left:clickLocX
            })
            .appendTo(id);
        });
        //Mousemove must be initialized only AFTER the click. HOW TO DO THIS?
        $(id).mousemove(function(e){
            var XpageCoord = e.pageX;
            var YpageCoord = e.pageY;
                window.Xloc = XpageCoord;
                window.Yloc = YpageCoord;
            var boxOffset = $('.newBox').offset();
            var boxHeight = YpageCoord - boxOffset.top; 
            var boxWidth = XpageCoord - boxOffset.left;

            $('.newBox').css({
                height:boxHeight + 'px',
                width:boxWidth + 'px'
            });
        });
    }

Answer 1

Just set the mousemove handler from within the click handler and use a flag to determine whether or not it has already been set to avoid adding it multiple times.

EDIT: An example

assignedMoveHandler = false;
$(id).click(function(e) {
    // other stuff...
    if(!assignedMoveHandler) {
        $(id).mousemove(function(e) {
            // mouse move handling code...                
        });
        assignedMoveHandler = true;
    }
}

I use a global here which you may or may not care about, I lookup the jquery object twice, etc., so it could be cleaned up a bit, but this is the general idea. When the click handler fires you check to see if you’ve assigned a mousemove handler yet. If not, assign it.