全球mouseMove [英] Global mouseMove

问题描述

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

I have made the following javascript to be used in my jQuery based website. What it does, is to move a slider up/down, and scale the item above higher/smaller.

一切正常，但由于滑块只有几个像素在高度，移动事件有点慢（它不会触发每个像素）所以当我快速移动鼠标时，滑块无法保持，鼠标从滑块项目中移出。由于它绑定到滑块，因此不会再触发mouseMove事件。我想一切都可以通过将mouseMove全局设置为整个站点来修复，但它不起作用，或者至少我不知道如何使其工作。它应该绑定到文档还是正文？

Everything works fine, but since the slider is only a few pixels in height, and the move event is a bit slow (it does not trigger for every pixel) so when I move the mouse fast, the slider can't hold on and the mouse get's out of the slider item. The mouseMove event won't be triggered no more since it is bound to the slider. I guess everything could be fixed by setting the mouseMove global to the whole site, but it won't work, or at least I don't know how to make that work. Should it be bound to document, or body?

这是我当前的滑块代码：

here is my current code for the 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) };
 };
}); 

};

感谢您的帮助，非常感谢

Thanks for any help, is much appreciated

推荐答案

将鼠标事件放在文档

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

});

这篇关于全球mouseMove的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！