javascript基础（鼠标事件拖拽，setCapture()方法）（三十六）

最新推荐文章于 2024-07-10 14:47:48 发布

咸鸭蛋炒饭

最新推荐文章于 2024-07-10 14:47:48 发布

阅读量3.7k

点赞数 2

分类专栏： HTML5基础篇文章标签： dom html javascript 鼠标

本文链接：https://blog.csdn.net/u010853130/article/details/55101191

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1.大概实现拖拽

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			
			#box2{
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				
				top: 200px;
				left: 500px;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				/*
				 * 使鼠标可以在页面中来拖拽box1
				 * 
				 * 拖拽的流程：
				 * 	1.当鼠标在元素上按下时，开始拖拽 	onmousedown
				 * 	2.当鼠标移动时，元素跟随鼠标移动 	onmousemove
				 * 	3.当鼠标松开时，元素固定在当前位置，拖拽结束	onmouseup
				 */
				
				
				//1.当鼠标在元素上按下时，开始拖拽 	onmousedown
				//为box1绑定一个鼠标按下的事件
				var box1 = document.getElementById("box1");
				box1.onmousedown = function(){
					
					//2.当鼠标移动时，元素跟随鼠标移动 	onmousemove
					//为document绑定一个鼠标移动的事件
					document.onmousemove = function(event){
						event = event || window.event;
						
						//获取鼠标的坐标
						var left = event.clientX;
						var top = event.clientY;
						
						//修改box1的位置
						box1.style.left = left + "px";
						box1.style.top = top + "px";
						
					};
					
					//3.当鼠标松开时，元素固定在当前位置，拖拽结束	onmouseup
					document.onmouseup = function(){
						//当鼠标松开时，将元素固定在当前位置，取消document的onmousemove事件
						document.onmousemove = null;
						//onmouseup事件只需要执行一次，执行过一次以后就没有存在的意义了
						document.onmouseup = null;
						
					};
					
				};
			};
			
			
		</script>
	</head>
	<body>
		
		<div id="box1"></div>
		
		<div id="box2"></div>
		
	</body>
</html>

2.完善一：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			
			#box2{
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				
				top: 200px;
				left: 500px;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				/*
				 * 使鼠标可以在页面中来拖拽box1
				 * 
				 * 拖拽的流程：
				 * 	1.当鼠标在元素上按下时，开始拖拽 	onmousedown
				 * 	2.当鼠标移动时，元素跟随鼠标移动 	onmousemove
				 * 	3.当鼠标松开时，元素固定在当前位置，拖拽结束	onmouseup
				 */
				
				
				//1.当鼠标在元素上按下时，开始拖拽 	onmousedown
				//为box1绑定一个鼠标按下的事件
				var box1 = document.getElementById("box1");
				box1.onmousedown = function(event){
					event = event || window.event;
					
					//设置box1捕获所有的鼠标按下的事件
					//在chrome中没有setCapture()和releaseCapture()方法
					//所以调用会导致浏览器报错
					/*if(box1.setCapture){
						box1.setCapture();
					}*/
					box1.setCapture && box1.setCapture();
					
					//求元素的偏移量
					//clientX - offsetLeft
					var ol = event.clientX - box1.offsetLeft;
					var ot = event.clientY - box1.offsetTop;
					
					/*
					 * 目前我们的元素的左上角和鼠标指针重合，
					 * 	我们希望我们点击元素时，鼠标和元素的相对的位置保持不变
					 */
					
					//2.当鼠标移动时，元素跟随鼠标移动 	onmousemove
					//为document绑定一个鼠标移动的事件
					document.onmousemove = function(event){
						event = event || window.event;
						
						//获取鼠标的坐标
						var left = event.clientX - ol;
						var top = event.clientY - ot;
						
						//修改box1的位置
						box1.style.left = left + "px";
						box1.style.top = top + "px";
						
					};
					
					//3.当鼠标松开时，元素固定在当前位置，拖拽结束	onmouseup
					document.onmouseup = function(){
						//当鼠标松开时，将元素固定在当前位置，取消document的onmousemove事件
						document.onmousemove = null;
						//onmouseup事件只需要执行一次，执行过一次以后就没有存在的意义了
						document.onmouseup = null;
						
						/*if(box1.releaseCapture){
							//设置box1不再对所有的事件进行捕获
							box1.releaseCapture();
						}*/
						box1.releaseCapture && box1.releaseCapture();
						
						
					};
					
					/*
					 * 当我们在浏览器中选中一个文字或一个内容并拖动时，浏览器会自动去搜索引擎中搜索该内容
					 * 	但是这个行为的出现会导致拖拽功能出现异常，这一行为是浏览器的默认行为
					 * 如果不希望发生该行为，则可以在onmousedown事件中取消默认行为
					 * 
					 * 但是这个方法对IE8不起作用
					 */
					
					return false;
					
				};
			};
			
			
		</script>
	</head>
	<body>
		
		我是一段文字
		
		<div id="box1"></div>
		
		<div id="box2"></div>
		
	</body>
</html>

2.1.setCapture()方法测试：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				//为两个按钮绑定单击响应函数
				var btn01 = document.getElementById("btn01");
				var btn02 = document.getElementById("btn02");
				
				btn01.onclick = function(){
					alert(1);
				}
				
				btn02.onclick = function(){
					alert(2);
				}
				
				/*
				 * 当元素设置setCapture()以后
				 * 	元素将会自动将下一次鼠标点击相关的事件捕获到自身上
				 */
				btn01.setCapture();
				
			};
			
		</script>
		
	</head>
	<body>
		
		<button id="btn01">按钮1</button>
		<button id="btn02">按钮2</button>
	</body>
</html>

3.完善二

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1 {
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			
			#box2 {
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				top: 200px;
				left: 500px;
			}
		</style>

		<script type="text/javascript">
			window.onload = function() {
				/*
				 * 使鼠标可以在页面中来拖拽box1
				 * 
				 * 拖拽的流程：
				 * 	1.当鼠标在元素上按下时，开始拖拽 	onmousedown
				 * 	2.当鼠标移动时，元素跟随鼠标移动 	onmousemove
				 * 	3.当鼠标松开时，元素固定在当前位置，拖拽结束	onmouseup
				 */

				//1.当鼠标在元素上按下时，开始拖拽 	onmousedown
				//为box1绑定一个鼠标按下的事件
				var box1 = document.getElementById("box1");
				
				drag(box1);

				var box2 = document.getElementById("box2");
				
				drag(box2);
				
				var img1 = document.getElementById("img1");
				
				drag(img1);

			};

			/*
			 * 提取一个可以拖拽任意元素的函数
			 * 	obj 要拖拽的元素
			 */
			function drag(obj) {
				obj.onmousedown = function(event) {
					event = event || window.event;

					//设置box1捕获所有的鼠标按下的事件
					//在chrome中没有setCapture()和releaseCapture()方法
					//所以调用会导致浏览器报错
					/*if(box1.setCapture){
						box1.setCapture();
					}*/
					obj.setCapture && obj.setCapture();

					//求元素的偏移量
					//clientX - offsetLeft
					var ol = event.clientX - obj.offsetLeft;
					var ot = event.clientY - obj.offsetTop;

					/*
					 * 目前我们的元素的左上角和鼠标指针重合，
					 * 	我们希望我们点击元素时，鼠标和元素的相对的位置保持不变
					 */

					//2.当鼠标移动时，元素跟随鼠标移动 	onmousemove
					//为document绑定一个鼠标移动的事件
					document.onmousemove = function(event) {
						event = event || window.event;

						//获取鼠标的坐标
						var left = event.clientX - ol;
						var top = event.clientY - ot;

						//修改box1的位置
						obj.style.left = left + "px";
						obj.style.top = top + "px";

					};

					//3.当鼠标松开时，元素固定在当前位置，拖拽结束	onmouseup
					document.onmouseup = function() {
						//当鼠标松开时，将元素固定在当前位置，取消document的onmousemove事件
						document.onmousemove = null;
						//onmouseup事件只需要执行一次，执行过一次以后就没有存在的意义了
						document.onmouseup = null;

						/*if(box1.releaseCapture){
							//设置box1不再对所有的事件进行捕获
							box1.releaseCapture();
						}*/
						obj.releaseCapture && obj.releaseCapture();

					};

					/*
					 * 当我们在浏览器中选中一个文字或一个内容并拖动时，浏览器会自动去搜索引擎中搜索该内容
					 * 	但是这个行为的出现会导致拖拽功能出现异常，这一行为是浏览器的默认行为
					 * 如果不希望发生该行为，则可以在onmousedown事件中取消默认行为
					 * 
					 * 但是这个方法对IE8不起作用
					 */

					return false;

				};
			}
		</script>
	</head>

	<body>

		我是一段文字

		<div id="box1"></div>

		<div id="box2"></div>
		
		<img id="img1" style="position: absolute;" src="img/an.jpg"/>

	</body>

</html>