Question

take a look at this code:

$(document).ready(function() {
    document.getElementById(sliderId).onmousedown = sliderMouseDown;
});

function sliderMouseDown() {
    document.onmousemove = sliderMouseMove; 
    document.onmouseup   = sliderMouseUp;
}

function sliderMouseMove() {
    $('#test').html("sliding");
}

function sliderMouseUp() {
    $('#test').html("not sliding");
    document.removeEventListener('mousemove', sliderMouseMove, false);
    document.removeEventListener('mouseup', sliderMouseUp, false);
}

Everything works as it should, until the sliderMouseUp function is called. Now, the function is called alright, and the #test-div says “not sliding”, but if I move my mouse around in the document afterwards, it displays “sliding” in the #test-div again, like if the removeEventListener function does not work. Am I doing something wrong here?

Answer 1

If jQuery is an option, and seems it is since you’re using it, do this:

$(function() {
  $("#" + sliderId).mousedown(function() { 
    $(document).mousemove(function() { 
      $("#test").html("sliding");
    }).mouseup(function() {
      $("#test").html("not sliding");
      $(document).unbind("mousemove mouseup");
    });
  });
});

Using the jQuery event model will result in a lot less hair-pulling, let it take care of the cross-browser and event quirks for you.