停止前一个函数继续用jquery执行

时间:2011-04-28 20:43:43

标签: javascript jquery slider jquery-animate

我有以下功能来创建滑块。它的工作原理(几乎完美)......我现在遇到的问题是,一旦你单击滑块它就会像它应该的那样移动,但是当我释放鼠标时我无法弄清楚如何阻止它移动?

连连呢? 谢谢!

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

    });

};

编辑: 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 个答案:

答案 0 :(得分:3)

在鼠标添加事件处理程序中添加:

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

您应该将处理绑定鼠标的函数移动到可以传递给unbind的东西,因为上面的代码会影响可能设置的文档上的所有mousemove处理程序。

unbind api docs

答案 1 :(得分:2)

如果您有其他功能绑定到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);
});