我有以下功能来创建滑块。它的工作原理(几乎完美)......我现在遇到的问题是,一旦你单击滑块它就会像它应该的那样移动,但是当我释放鼠标时我无法弄清楚如何阻止它移动?
连连呢? 谢谢!
var moveSlider = function(){
//sets the current position and offset variables
var currentPosition;
var offset;
//looks for the mousedown event on the slider
$("#slider").mousedown(function(e){
//sets the offset = to the mouse coordinate of the page - the offset of the slider
offset = e.pageX - this.offsetLeft;
console.log("offset: " + offset);
//tracks the mosemovement in the document
$(document).mousemove(function(e){
currentPosition = e.pageX - offset;
//takes the mouse current position (minues the offset) and sets an absolute position
$('#slider').css('left', currentPosition + "px");
console.log("CURRENT POSITION: " + currentPosition);
//checks to make sure it's within the box
if(currentPosition <= 0){
$('#slider').css('left', 0 + "px");
}else if(currentPosition >= 400){
$('#slider').css('left', 400-20 + "px");
}
});
});
$("#slider").mouseup(function(){
$('#slider').css('left', currentPosition + "px")
console.log("Fixed");
});
};
编辑: MVCHR,我离开了你的榜样,想出了以下内容。鼠标移动仍然有效,但是当你释放鼠标时它继续移动。我确定我错过了一些愚蠢的东西
再次编辑:愚蠢的错误,我仍然让鼠标移动到那里。拿出来它现在完美运作!谢谢:))
再次感谢
var moveSlider = function(){
//sets the current position and offset variables
var currentPosition;
var offset;
var rightOffset
//looks for the mousedown event on the slider
$("#slider").mousedown(function(e){
//sets the offset = to the mouse coordinate of the page - the offset of the slider
offset = e.pageX - this.offsetLeft;
console.log("offset: " + offset);
$(document).bind('mousemove', mmHandler);
});
var mmHandler = function (e) {
//tracks the mosemovement in the document
$(document).mousemove(function(e){
currentPosition = e.pageX - offset;
//takes the mouse current position (minues the offset) and sets an absolute position
$('#slider').css('left', currentPosition + "px");
console.log("CURRENT POSITION: " + currentPosition);
//checks to make sure it's within the box
if(currentPosition <= 0){
$('#slider').css('left', 0 + "px");
}else if(currentPosition >= 400){
$('#slider').css('left', 400-20 + "px");
}
});
};
$(document).mouseup(function(e) {
// some code then
$(document).unbind('mousemove', mmHandler);
});
};
答案 0 :(得分:3)
在鼠标添加事件处理程序中添加:
$(document).unbind('mousemove');
您应该将处理绑定鼠标的函数移动到可以传递给unbind的东西,因为上面的代码会影响可能设置的文档上的所有mousemove处理程序。
答案 1 :(得分:2)
如果您有其他功能绑定到mousemove
但您不想删除,请将mousemove
功能移至bind
mousedown
上的命名功能和unbind
mouseup
。请注意,假设滑块不垂直移动,您还需要将mouseup
放在document
而不是#slider
。
这样的事情:
var mmHandler = function (e) {
// mousemove code here
};
$("#slider").mousedown(function(e) {
// some code then
$(document).bind('mousemove', mmHandler);
});
$(document).mouseup(function(e) {
// some code then
$(document).unbind('mousemove', mmHandler);
});