求助一个关于mousedown和mouseup事件响应的问题

最近在做一个网页的音乐播放器播放列表什么的都完成了,只剩最后一个进度条滑块的拖动效果了,我的思路是这样的:
由$("#pulley").mousedown事件给这个控件bind一个mousemove事件然后在mouseup的时候将mousemove事件解绑,但是事件的触发总是时灵时不灵的苦恼中 ..上代码



                $("#pulley").mousedown(function(){

			$("#pulley").bind("mousemove", function(e){

				$("#debug").text("start");

				setschdule(e);

			});

		});

		$("*").mouseup(function(){

			$("#pulley").unbind("mousemove");

			$("#debug").text("test");

		});

14 个解决方案

#1

加个mouseleave试试

#2

该元素mousedown的是应该给document或者body绑定mousemove事件，mouseup也应该绑定在document或者body上

#3

引用 2 楼 wwwull 的回复:

该元素mousedown的是应该给document或者body绑定mousemove事件，mouseup也应该绑定在document或者body上

mousedown是指鼠标左键按下的事件
放在document或者body下面会有问题吧

#4

引用 1 楼 MengYouXuanLv 的回复:

加个mouseleave试试

试过了 mouseleave事件是指鼠标移开该控件时触发.. 和我的概念不一样

#5

$("#pulley").mousedown(function () {

    //此处绑定document

    $(document).bind("mousemove", function (e) {

        $("#debug").text("start");

        setschdule(e);

    });

});

$(document).mouseup(function () {

    //同上

    $(document).unbind("mousemove");

    $("#debug").text("test");

});

我的意思是这样，mousemove不绑在页面里万一手抖移出元素外事件不就停了

#6



$("#pulley").mousedown(function(){

			$(document).bind("mousemove", function(e){

				$("#debug").text("start");

				setschdule(e);

			});

		});

		$(document).mouseup(function(){

			$("#pulley").unbind("mousemove");

			$("#debug").text("close");

		});

试过了好像不可以后面document解绑不了事件然后滑块就停不下来了

#7

求别沉

#8

不要沉啊

#9

解绑应该是$(document).unbind("mousemove");

原生的拖动你可能考虑些这样的代码

oDiv2.onmousedown = function(ev){

		var ev = ev || window.event;

		disY = ev.clientY - oDiv2.offsetTop;


		document.onmousemove = function(ev){

			var ev = ev || window.event;


			var T = ev.clientY - disY;


			scrollBar(T);


		};

		document.onmouseup = function(){

			document.onmousemove = null;

			document.onmouseup = null;

		};

		return false;

	};

#10

看到

$("*").mouseup(function(){

            $("#pulley").unbind("mousemove");

            $("#debug").text("test");

        });

可以想象到你代码何其壮观。

#11

不要自己写了，用jQuery现成的插件吧

http://api.jqueryui.com/draggable/

如果你有兴趣可以看看下面的原生JS写的代码



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>drag</title>

</head>

<body>

<script type="text/javascript">

(function(w) {

	var drag = function(op) {

		this.hander = op.hander || null;

		this.target = op.target || op.hander || null;

		this.start = op.start || null;

		this.move = op.move || null;

		this.end = op.end || null;

		this.pos = null;

		this.draging = false;

		if(this.hander) {

			addEvent(this.hander, 'mousedown', bind(this, this.dragStart));

			addEvent(document, 'mousemove', bind(this, this.dragMove));

			addEvent(document, 'mouseup', bind(this, this.dragEnd));			

		}

	}

	drag.prototype = {

		dragStart: function(e) {

			this.start && this.start.call(this, e);			

			this.pos = [e.pageX - parseInt(this.target.style.left), e.pageY - parseInt(this.target.style.top)];

			this.draging = true;

			e.stop();

		},

		dragMove: function(e) {

			if(this.draging) {

				this.target.style.left = e.pageX - this.pos[0] + 'px';

				this.target.style.top = e.pageY - this.pos[1] + 'px';

				this.move && this.move.call(this, e);

			}

		},

		dragEnd: function(e) {

			this.draging = false;

			this.pos = null;

			this.end && this.end.call(this, e);

		}

	};


	function bind(o, fn) {

		return function(e) {

			var ev = e || window.event;

			ev.pageX = e.pageX || ev.clientX;

			ev.pageY = e.pageY || ev.clientY;

			ev.stop = e.preventDefault? function() {

				e.preventDefault();

				e.stopPropagation();

			} : function() {

				ev.cancelBubble = true;

				ev.returnValue = false;

			}

			fn.call(o, e);

		}

	}

	function addEvent(dom, type, fn) {

		if(document.addEventListener) {

			dom.addEventListener(type, fn, false);

		} else if(document.attachEvent) {

			dom.attachEvent('on' + type, fn);

		} else {

			dom['on' + type] = fn;

		}

	}

	function removeEvent(dom, type, fn) {

		if(document.removeEventListener) {

			dom.removeEventListener(type, fn, false);

		} else if(document.detachEvent) {

			dom.detachEvent('on' + type, fn);

		} else {

			dom['on' + type] = null;

		}		

	}


	w.drag = drag;

})(window);

</script>

<div id="box" style="width:400px;height:200px;background:#f0f;"></div>

<script type="text/javascript">

	new drag({

		hander: document.getElementById('box'),

		start: function(e) {

			var s = document.getElementById('test');			

			if(!s) {

				s = document.createElement('div');

				s.id = 'test';

				s.style.position = 'absolute';

				s.style.width = '200px';

				s.style.height = '200px';

				s.style.backgroundColor = '#f00';

				document.body.appendChild(s);

				this.target = s;

			} else {

				s.style.display = 'block';

			}

			s.style.left = e.pageX + 'px';

			s.style.top = e.pageY + 'px'; 

		},

		end: function(e) {

			this.target.style.display = 'none';

		}

	});

</script>

</body>

</html>

#12

急求楼主怎么解决了呢

#13

我感觉需要考虑两点需要考虑，
1、第一鼠标移出目标区域，
如果浏览器不支持drag事件，应该考虑mouseleave事件，因为如果光标移出了目标区域，也就无法监控到mouseup事件了
2、浏览器支持drag事件，
我测试（chrome 53，对不起，我不知道由其它的浏览器）后发现，在mousedown事件触发之后，只要鼠标移动就会触发drag事件，不管鼠标移动到哪里，只要松开鼠标按键，就会触发dragend事件

总结：如果浏览器支持drag事件，那么直接使用drag事件，如果不支持的话，就得用同时写四个事件监听器了。

#14

另外说下，学习的话，不建议直接使用插件，后端除外

#1

加个mouseleave试试

#2

该元素mousedown的是应该给document或者body绑定mousemove事件，mouseup也应该绑定在document或者body上

#3

引用 2 楼 wwwull 的回复:

该元素mousedown的是应该给document或者body绑定mousemove事件，mouseup也应该绑定在document或者body上

mousedown是指鼠标左键按下的事件
放在document或者body下面会有问题吧

#4

引用 1 楼 MengYouXuanLv 的回复:

加个mouseleave试试

试过了 mouseleave事件是指鼠标移开该控件时触发.. 和我的概念不一样

#5

$("#pulley").mousedown(function () {

    //此处绑定document

    $(document).bind("mousemove", function (e) {

        $("#debug").text("start");

        setschdule(e);

    });

});

$(document).mouseup(function () {

    //同上

    $(document).unbind("mousemove");

    $("#debug").text("test");

});

我的意思是这样，mousemove不绑在页面里万一手抖移出元素外事件不就停了

#6



$("#pulley").mousedown(function(){

			$(document).bind("mousemove", function(e){

				$("#debug").text("start");

				setschdule(e);

			});

		});

		$(document).mouseup(function(){

			$("#pulley").unbind("mousemove");

			$("#debug").text("close");

		});

试过了好像不可以后面document解绑不了事件然后滑块就停不下来了

#7

求别沉

#8

不要沉啊

#9

解绑应该是$(document).unbind("mousemove");

原生的拖动你可能考虑些这样的代码

oDiv2.onmousedown = function(ev){

		var ev = ev || window.event;

		disY = ev.clientY - oDiv2.offsetTop;


		document.onmousemove = function(ev){

			var ev = ev || window.event;


			var T = ev.clientY - disY;


			scrollBar(T);


		};

		document.onmouseup = function(){

			document.onmousemove = null;

			document.onmouseup = null;

		};

		return false;

	};

#10

看到

$("*").mouseup(function(){

            $("#pulley").unbind("mousemove");

            $("#debug").text("test");

        });

可以想象到你代码何其壮观。

#11

不要自己写了，用jQuery现成的插件吧

http://api.jqueryui.com/draggable/

如果你有兴趣可以看看下面的原生JS写的代码



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>drag</title>

</head>

<body>

<script type="text/javascript">

(function(w) {

	var drag = function(op) {

		this.hander = op.hander || null;

		this.target = op.target || op.hander || null;

		this.start = op.start || null;

		this.move = op.move || null;

		this.end = op.end || null;

		this.pos = null;

		this.draging = false;

		if(this.hander) {

			addEvent(this.hander, 'mousedown', bind(this, this.dragStart));

			addEvent(document, 'mousemove', bind(this, this.dragMove));

			addEvent(document, 'mouseup', bind(this, this.dragEnd));			

		}

	}

	drag.prototype = {

		dragStart: function(e) {

			this.start && this.start.call(this, e);			

			this.pos = [e.pageX - parseInt(this.target.style.left), e.pageY - parseInt(this.target.style.top)];

			this.draging = true;

			e.stop();

		},

		dragMove: function(e) {

			if(this.draging) {

				this.target.style.left = e.pageX - this.pos[0] + 'px';

				this.target.style.top = e.pageY - this.pos[1] + 'px';

				this.move && this.move.call(this, e);

			}

		},

		dragEnd: function(e) {

			this.draging = false;

			this.pos = null;

			this.end && this.end.call(this, e);

		}

	};


	function bind(o, fn) {

		return function(e) {

			var ev = e || window.event;

			ev.pageX = e.pageX || ev.clientX;

			ev.pageY = e.pageY || ev.clientY;

			ev.stop = e.preventDefault? function() {

				e.preventDefault();

				e.stopPropagation();

			} : function() {

				ev.cancelBubble = true;

				ev.returnValue = false;

			}

			fn.call(o, e);

		}

	}

	function addEvent(dom, type, fn) {

		if(document.addEventListener) {

			dom.addEventListener(type, fn, false);

		} else if(document.attachEvent) {

			dom.attachEvent('on' + type, fn);

		} else {

			dom['on' + type] = fn;

		}

	}

	function removeEvent(dom, type, fn) {

		if(document.removeEventListener) {

			dom.removeEventListener(type, fn, false);

		} else if(document.detachEvent) {

			dom.detachEvent('on' + type, fn);

		} else {

			dom['on' + type] = null;

		}		

	}


	w.drag = drag;

})(window);

</script>

<div id="box" style="width:400px;height:200px;background:#f0f;"></div>

<script type="text/javascript">

	new drag({

		hander: document.getElementById('box'),

		start: function(e) {

			var s = document.getElementById('test');			

			if(!s) {

				s = document.createElement('div');

				s.id = 'test';

				s.style.position = 'absolute';

				s.style.width = '200px';

				s.style.height = '200px';

				s.style.backgroundColor = '#f00';

				document.body.appendChild(s);

				this.target = s;

			} else {

				s.style.display = 'block';

			}

			s.style.left = e.pageX + 'px';

			s.style.top = e.pageY + 'px'; 

		},

		end: function(e) {

			this.target.style.display = 'none';

		}

	});

</script>

</body>

</html>

秒客网

求助一个关于mousedown和mouseup事件响应的问题

14 个解决方案

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

相关文章