Javascript 仅在单击后初始化mousemove事件

我正在编写一个插件，当鼠标在画布div上单击时，它会创建一个选择框。到目前为止，我已经编写了一个插件，其中的

click（）

和

mousemove（）

事件在代码中彼此相邻（我不知道如何在其他事件中嵌入事件）。但是，当鼠标在单击之前在画布上移动时，这就成了一个问题。有人知道如何通过单击初始化mousemove处理程序吗

以下是我迄今为止编写的代码：

$.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'
            });
        });
    }

$.fn.createBox=函数（id）{
$（id）.css({
光标：“十字线”
});
$（id）。单击（函数（e）{
var clickLocX=e.pageX；
var clickLocY=e.pageY；
$（''）.attr({
'class'：'newBox'，
“ctr”：“on”
})
.css({
顶部：clickLocY，
左：单击LOCX
})
.附录（id）；
});
//Mousemove必须仅在单击后初始化。如何执行此操作？
$（id）.mousemove（函数（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({
高度：箱高+px，
宽度：boxWidth+‘px’
});
});
}

只需从

单击
处理程序中设置
mousemove
处理程序，并使用一个标志确定是否已设置该处理程序，以避免多次添加它

编辑：一个例子

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

我在这里使用了一个你可能关心也可能不关心的全局变量，我查找jquery对象两次，等等，这样可以稍微清理一下，但这是一般的想法。当
单击
处理程序时，您将检查是否已分配
mousemove
处理程序。如果没有，请指定它。
@Ed_S.-您介意提供一个示例来说明您的意思吗？这会有很大帮助。@codenja:好的，就这样吧。我一般不擅长jquery或web开发，但一般的概念适用于这里。只分配一次处理程序，并且只在单击后分配它。@Ed_S。--好的，只是澄清一下：
assignedMoveHandler
是函数吗？还是jquery对象？你能举一个假设的例子吗，因为我还是有点迷路了…@Ed_。--我把这里的东西弄得一团糟：你能告诉我哪里出了问题吗？