Привязка mousemove в функции mousedown с помощью jQuery

Я пытаюсь привязать событие mousemove к div, когда левый mousebutton не работает, и развязать, когда он выпущен. Этот код должен быть достаточно самостоятельной-explainatory.

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 говорит, что методы bind не определены в переменной sbar в пределах handleMouseDown и handleMouseUp. Консоль firebug печатает <div class="statusbar"> для линии прокомментировано //firebug.

Я делаю что-то неправильно, вероятно, при привязке mousedown и mouseup... но что?! Я использую jQuery v1.4.2, если это поможет?

6
javascript javascript-events jquery

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');

вы можете увидеть рабочую демонстрацию только с этими исправлениями здесь :)

6