[英]Global mouseMove
I have made the following javascript to be used in my jQuery based website. 我已经在我的基于jQuery的网站上使用了以下javascript。 What it does, is to move a slider up/down, and scale the item above higher/smaller.
它的作用是向上/向下移动滑块,并将项目缩放到更高/更小的上方。
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.
由于它绑定到滑块,因此不会再触发mouseMove事件。 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.
我想一切都可以通过将mouseMove全局设置为整个站点来修复,但它不起作用,或者至少我不知道如何使其工作。 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 感谢您的帮助,非常感谢
Place the mouse events on the document
将鼠标事件放在
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) };
};
});
});
On mousedown
, you should bind an event handler (on the document
) to mousemove
and mouseup
. 在
mousedown
,您应该将事件处理程序(在document
)绑定到mousemove
和mouseup
。
In the mouseup handler, you should disconnect the two global handlers again. 在mouseup处理程序中,您应该再次断开两个全局处理程序。
However, it is possibly simpler to use the Draggable of jQuery UI: http://jqueryui.com/demos/draggable/ 但是,使用jQuery UI的Draggable可能更简单: http : //jqueryui.com/demos/draggable/
通常你会在滑块上观察mousedown
(开始拖动),当你在拖动时,你会在document
任何地方观察mousemove
和mouseup
(以及keypress
,如果你想允许Esc取消等等)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.