остановить предыдущую функцию от продолжения выполнения с jquery - PullRequest
Новая
       16

остановить предыдущую функцию от продолжения выполнения с jquery

0 голосов
/ 29 апреля 2011

У меня есть следующая функция для создания слайдера. Это работает (почти идеально) ... Проблема, с которой я столкнулся сейчас, состоит в том, что, как только вы нажимаете на слайдер, он перемещается, как и должен, но я не могу понять, как остановить его движение, когда я отпускаю мышь

Предложения? Спасибо! 

var moveSlider = function(){

    //sets the current position and offset variables
    var currentPosition;
    var offset;

    //looks for the mousedown event on the slider
    $("#slider").mousedown(function(e){
        //sets the offset = to the mouse coordinate of the page - the offset of the slider
        offset = e.pageX - this.offsetLeft;
        console.log("offset: " + offset);

        //tracks the mosemovement in the document
        $(document).mousemove(function(e){
            currentPosition = e.pageX - offset;

            //takes the mouse current position (minues the offset) and sets an absolute position
            $('#slider').css('left', currentPosition + "px");
            console.log("CURRENT POSITION: " + currentPosition);

            //checks to make sure it's within the box
            if(currentPosition <= 0){
                $('#slider').css('left', 0 + "px");
            }else if(currentPosition >= 400){
                $('#slider').css('left', 400-20 + "px");    
            }
        });
    });

    $("#slider").mouseup(function(){
        $('#slider').css('left', currentPosition + "px")
            console.log("Fixed");

    });

};

EDIT: MVCHR, я пошел по вашему примеру и придумал следующее. Движение мыши все еще работает, но когда вы отпустите кнопку мыши, она будет продолжать двигаться. Я уверен, что мне не хватает чего-то глупого

Правка, опять же: глупая ошибка, у меня все еще была мышь. Взял его и теперь он отлично работает! Спасибо:)

Еще раз спасибо 

var moveSlider = function(){

    //sets the current position and offset variables
    var currentPosition;
    var offset;
    var rightOffset

    //looks for the mousedown event on the slider
    $("#slider").mousedown(function(e){
        //sets the offset = to the mouse coordinate of the page - the offset of the slider
        offset = e.pageX - this.offsetLeft;
        console.log("offset: " + offset);
        $(document).bind('mousemove', mmHandler);
    }); 

    var mmHandler = function (e) {

            //tracks the mosemovement in the document
            $(document).mousemove(function(e){
                currentPosition = e.pageX - offset;

                //takes the mouse current position (minues the offset) and sets an absolute position
                $('#slider').css('left', currentPosition + "px");
                console.log("CURRENT POSITION: " + currentPosition);

                //checks to make sure it's within the box
                if(currentPosition <= 0){
                    $('#slider').css('left', 0 + "px");
                }else if(currentPosition >= 400){
                    $('#slider').css('left', 400-20 + "px");    
                }
            });
        };


    $(document).mouseup(function(e) {
      // some code then
      $(document).unbind('mousemove', mmHandler);
    });


};

Ответы [ 2 ]

3 голосов
/ 29 апреля 2011

В свой обработчик событий мыши добавьте:

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

Вам, вероятно, следует поместить функцию для обработки связанного перемещения мыши во что-то, что вы можете передать unbind, потому что приведенный выше код повлияет на все обработчики перемещения мыши в документе, который может быть установлен.

unbind api docs

2 голосов
/ 29 апреля 2011

Если у вас есть другие функции, связанные с mousemove, которые вы не хотите удалять, переместите вашу функцию mousemove в именованную функцию, которую вы bind включили mousedown и unbind включили mouseup , Обратите внимание, что вы также захотите поставить mouseup на document, а не #slider, если ваш слайдер не двигается вертикально.

Примерно так: 

var mmHandler = function (e) {
                  // mousemove code here
                };

$("#slider").mousedown(function(e) {
  // some code then
  $(document).bind('mousemove', mmHandler);
});

$(document).mouseup(function(e) {
  // some code then
  $(document).unbind('mousemove', mmHandler);
});
...