全球mouseMove

我已经在我的基于jQuery的网站上使用了以下javascript。 它的作用是向上/向下移动滑块，并将项目缩放到更高/更小的上方。

一切正常，但由于滑块只有几个像素的高度，并且移动事件有点慢（它不会触发每个像素）所以当我快速移动鼠标时，滑块无法保持和鼠标滑出滑块项目。 由于它已绑定到滑块，因此不会再触发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 （以及keypress ，如果你想允许Esc取消等等）。