只有在点击之后才初始化鼠标移动事件

initialize mousemove event only after click

本文关键字：初始化 鼠标 移动 事件 之后      更新时间：2023-09-26

我正在编写一个插件，当鼠标单击画布div时创建一个选择选框。到目前为止，我已经在代码中编写了click()和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'
            });
        });
    }

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

编辑:一个例子

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

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

相关文章：