仅在单击后初始化 mousemove 事件

Question

我正在编写一个插件，当鼠标单击画布 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'
            });
        });
    }

Answer 1

只需从click 处理程序内设置mousemove 处理程序，并使用一个标志来确定它是否已经设置以避免多次添加。

编辑：一个例子

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

我在这里使用了一个你可能关心或不关心的全局变量，我查找了 jquery 对象两次，等等，所以它可以被清理一下，但这是一般的想法。当click 处理程序触发时，您检查是否已经分配了mousemove 处理程序。如果没有，分配它。