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

只需在 mousemove处理程序中的中设置click处理程序，并使用一个标志来确定是否已将其设置为避免多次添加。< / p>

编辑：一个例子

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

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

仅在单击后初始化mousemove事件

1 个答案: