mouseup和mousemove的javascript / jquery事件问题

Question

var vol_drag = false;
$('.video-volume-wrapper').on('mousedown', 'div', function(e){
  vol_drag = true;
  update_volume(e.pageX)
});

$(document).on('mousemove', function(e){
  if(vol_drag === true){
    update_volume(e.pageX);
  }
});

$(document).on('mouseup', function(e){
  if(vol_drag === true){
    vol_drag = false;
    update_volume(e.pageX);
  }
});


function update_volume(x){
  var bar = $('.video-bar-inner-wrapper');
  var max_vol = max_vol_pos;
  var position = x - vol_bar_start_pos;
  var curr_vol = parseFloat((position-0)/(max_vol-0));

  if(curr_vol > 1){
    curr_vol = 1;
  }

  if(curr_vol < 0){
    curr_vol = 0;
  }

  $('.volume-position').css({'left':(curr_vol*100)+'%'});
  $('.video-volume-bar').css('width',(curr_vol*100)+'%');
  video.volume = curr_vol;
};

我有这个代码，允许我控制HTML 5视频元素的音量，但有时在我拖动音量滑块并释放鼠标按钮（鼠标事件）之后，鼠标移动仍会被激活，导致具有滑块的效果即使mouseup应将vol_drag变量设置为false并且应该停止发生mousemove事件，因此卡在光标下。有这种经验的人以及如何解决这个问题？感谢。