javascript实现div拖放

最新推荐文章于 2021-10-20 20:25:09 发布

LYC_2011_ACM

最新推荐文章于 2021-10-20 20:25:09 发布

阅读量990

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript JavaScript Javascript javaScript 拖放清除函数

本文链接：https://blog.youkuaiyun.com/LYC_2011_ACM/article/details/8461220

javascript 专栏收录该内容

7 篇文章

订阅专栏

本文通过动手实践，探讨JavaScript实现div元素拖放过程中遇到的问题。内容包括：为何在div上松开鼠标后，document上的onmouseup事件仍能被触发；以及在清除onmousemove和onmouseup函数后，为何还能继续触发这两个函数的疑惑。同时注意到，某个函数只执行了一次，而另一个可以多次执行，寻求解答。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动手练习，真的能发现好多问题，有问题还是好的，趁早解决，哈哈~不过还是有困惑~不知道去哪里找答案，先记着吧，以后看到相关的知识再回过头来看~

<!DOCTYPE html>
<html>
<head>
<style>
#div1{width:100px;height:100px;background:pink;position:absolute;}
</style>
<script>
window.onload=function(){
	var oDiv1 = document.getElementById('div1');
	oDiv1.onmousedown = function(ev){
		var oEvent = ev || event;
		var disX = oEvent.clientX - oDiv1.offsetLeft;   //对象在鼠标按下时所处的位置
		var disY = oEvent.clientY - oDiv1.offsetTop;

		document.onmousemove = function(ev){
			var oEvent = ev || event;
			var l = oEvent.clientX - disX;  //鼠标移动对象的位移
			var h = oEvent.clientY - disY;
			oDiv1.style.left = l + 'px';
			oDiv1.style.top = h + 'px';
		};
	};
	oDiv1.onmouseup = function(ev){
		//清除函数,否则div将永远跟着鼠标移动
		document.onmousemove = null;
		document.onmouseup = null;
	};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

看了教程，然后按自己的理解，再写了这个拖动，发现有bug。这是给div对象加上鼠标点击和松开的事件，显示都正常，但是当我们点击这个div，然后拖动它超出了浏览器的可视区域再松开鼠标时，就能发现它并没有触发div的onmouseup事件，所以在没有点击的情况下，div一直随鼠标移动。

然后回头再去看教程的代码，如下：

<!DOCTYPE html>
<html>
<head>
<style>
#div1{width:100px;height:100px;background:pink;position:absolute;}
</style>
<script>
window.onload=function(){
	var oDiv1 = document.getElementById('div1');
	oDiv1.onmousedown = function(ev){
		var oEvent = ev || event;
		var disX = oEvent.clientX - oDiv1.offsetLeft;   //对象在鼠标按下时所处的位置
		var disY = oEvent.clientY - oDiv1.offsetTop;

		document.onmousemove = function(ev){
			var oEvent = ev || event;
			var l = oEvent.clientX - disX;  //鼠标移动对象的位移
			var h = oEvent.clientY - disY;
			oDiv1.style.left = l + 'px';
			oDiv1.style.top = h + 'px';
		};
		document.onmouseup = function(ev){
			//清除函数,否则div将永远跟着鼠标移动
			document.onmousemove = null;
			document.onmouseup = null;
		};
	};

};

</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

教程中将onmouseup事件绑定在document上了，这样鼠标移出了可视区，松开时还是能触发该事件，所以一切正常。然后我又开始困惑了，为什么onmouseup要写在onmousedown里面呢，按理说，他们两个虽然有前后关系，先点击在有松开，但是并没有包含关系啊，就像鼠标移入移出一样，平时很少将移出写在移入函数里面，所以我就把onmouseup给弄出来了，结果错了，div一直跟着鼠标移动，松开貌似也没触发onmouseup函数。。。。

<!DOCTYPE html>
<html>
<head>
<style>
#div1{width:100px;height:100px;background:pink;position:absolute;}
</style>
<script>
window.onload=function(){
	var oDiv1 = document.getElementById('div1');
	oDiv1.onmousedown = function(ev){
		var oEvent = ev || event;
		var disX = oEvent.clientX - oDiv1.offsetLeft;   //对象在鼠标按下时所处的位置
		var disY = oEvent.clientY - oDiv1.offsetTop;

		document.onmousemove = function(ev){
			var oEvent = ev || event;
			var l = oEvent.clientX - disX;  //鼠标移动对象的位移
			var h = oEvent.clientY - disY;
			oDiv1.style.left = l + 'px';
			oDiv1.style.top = h + 'px';
		};
	};
	document.onmouseup = function(ev){
		//清除函数,否则div将永远跟着鼠标移动
		document.onmousemove = null;
		document.onmouseup = null;
	};

};

</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

然后多看了几遍才知道，其实有触发该函数，这个onmouseup是绑定在document上的，onmouseup松开鼠标时就被清空了，即这个函数只被执行一次就米有了。所以去掉上面的document.onmouseup = null;就可以了

解惑一、将onmouseup事件绑定在document上时，在div上松开鼠标时还是能触发document上的事件；

困惑一、这里框框中的两句把onmousemove函数和onmouseup函数清空了，为什么第二次点击div时还能触发这两个函数呢，里面的内容不是被清空了么？