javascript - 全局鼠标移动

Question

我已将以下 javascript 用于我基于 jQuery 的网站。它的作用是向上/向下移动 slider ，并将上面的项目缩放得更高/更小。

一切正常，但由于 slider 的高度只有几个像素，而且移动事件有点慢(它不会触发每个像素)所以当我快速移动鼠标时， slider 无法保持打开，鼠标离开 slider 项目。 mouseMove 事件不会再触发，因为它已绑定(bind)到 slider 。我想一切都可以通过将 mouseMove 全局设置为整个站点来修复，但它不起作用，或者至少我不知道如何使它起作用。它应该绑定(bind)到文档还是正文？

这是我当前的 slider 代码:

$.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

在文档上放置鼠标事件

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

});