将鼠标移动到mousedown函数中与jQuery绑定

Question

我试图在鼠标左键停止时将mousemove事件绑定到div,并在释放时解除绑定.这段代码应该是相当自我解释的.

function handleMouseDown(e, sbar){
    if (e.button == 0){
        console.log(sbar); //firebug
        sbar.bind('mousemove', function(event){
            handleMouseMove(event, sbar);
        });
    }
}

function handleMouseUp(e, sbar){
    sbar.unbind('mousemove');       
}

function handleMouseMove(e, sbar){
    // not sure it this will work yet, but unimportant
    $(".position").html(e.pageX);
}

$(document).ready(function (){

    var statusbar = $(".statusbar");

    statusbar.mousedown(function(event){
        handleMouseDown(event, this);
    });

    statusbar.mouseup(function(event){
        handleMouseUp(event, this);
    });

});

HTML的重要部分看起来像这样

<div id="main">
    <div class="statusbar">
        <p class="position"></p>
    </div>
</div>

Firebug说在handleMouseDown和handleMouseUp中的变量sbar上绑定方法是未定义的.firebug控制台打印出<div class="statusbar">注释// firebug的行.

我做错了,可能在绑定mousedown和mouseup时...但是什么？!我正在使用jQuery v1.4.2,如果有帮助的话？

Answer 1

.bind()并且.unbind()是jQuery函数,所以你需要稍微调整,而不是这个:

    sbar.bind('mousemove', function(event){
        handleMouseMove(event, sbar);
    });

你需要这个(把它包装成一个jQuery对象):

    $(sbar).bind('mousemove', function(event){
        handleMouseMove(event, sbar);
    });

同样的.unbind():

$(sbar).unbind('mousemove');

你可以在这里看到只有那些修正的工作演示 :)