全局mouseMove

Question

我已经制作了以下javascript脚本，用于我的基于jQuery的网站。它的作用是向上/向下移动滑块，并将项目放大/缩小。

一切都很好，但是由于滑块的高度只有几个像素，而且move事件有点慢(不是每个像素都会触发)，所以当我快速移动鼠标时，滑块不能保持不动，鼠标就会离开滑块项目。mouseMove事件将不再被触发，因为它已绑定到滑块。我想所有的事情都可以通过设置整个站点的全局mouseMove来解决，但是它不会工作，或者至少我不知道怎么做。它应该绑定到文档还是正文？

这是我当前的滑块代码：

$.fn.resize = function (itemToResize) {

MinSize = 100;
MaxSize = 800;

pageYstart = 0;
sliderMoveing = false;
nuskriverHeight = 0;

this.mousedown(function(e) {
 pageYstart=e.pageY;
 sliderMoveing = true
 nuskriverHeight = parseFloat((itemToResize).css('height'));
});

this.mouseup(function() { 
 sliderMoveing = false 
});

this.mousemove(function(e) {
 if (sliderMoveing) { 
  (itemToResize).css('height', (nuskriverHeight + (e.pageY - pageYstart))); 
  if (parseFloat( (itemToResize).css('height')) > MaxSize) { (itemToResize).css('height', MaxSize) };
  if (parseFloat( (itemToResize).css('height')) < MinSize) { (itemToResize).css('height', MinSize) };
 };
}); 

}；

感谢您的帮助，我非常感激

Answer 1

将鼠标事件放在document上

var $doc = $(document);

this.mousedown(function(e) {
  pageYstart=e.pageY;
  sliderMoveing = true
  nuskriverHeight = parseFloat((itemToResize).css('height'));

  $doc.mouseup(function() { 
    sliderMoveing = false ;
    $doc.unbind('mousemove mouseup')
  });

  $doc.mousemove(function(e) {
    if (sliderMoveing) { 
     (itemToResize).css('height', (nuskriverHeight + (e.pageY - pageYstart))); 
     if (parseFloat( (itemToResize).css('height')) > MaxSize) { (itemToResize).css('height', MaxSize) };
     if (parseFloat( (itemToResize).css('height')) < MinSize) { (itemToResize).css('height', MinSize) };
    };
  }); 

});

Answer 2

在mousedown上，您应该将事件处理程序(在document上)绑定到mousemove和mouseup。

在mouseup处理程序中，您应该再次断开两个全局处理程序的连接。

但是，使用jQuery UI的Draggable可能更简单：http://jqueryui.com/demos/draggable/

Answer 3

通常，你会在滑块上观察mousedown (开始拖动)，当你拖动的时候，你会在document上的任何地方观察mousemove和mouseup (如果你想允许Esc取消等等)。