javascript - 仅在单击后初始化 mousemove 事件

Question

我正在编写一个插件，当在 Canvas div 上单击鼠标时，它会创建一个选择选取框。到目前为止，我已经用代码中彼此相邻的 click() 和 mousemove() 事件编写了插件(我不知道有什么方法可以将事件嵌入其中其他事件)。但是当鼠标在点击之前移到 Canvas 上时，这就会成为一个问题。有谁知道如何通过单击来初始化 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 处理程序。如果没有，请分配它。