鼠标事件代码

最新推荐文章于 2022-07-01 11:15:11 发布

原创最新推荐文章于 2022-07-01 11:15:11 发布 · 528 阅读

CC 4.0 BY-SA版权

在这里插入代码片
```//1.学会自己对不会的自己查询2.分析每行代码的意思，由少到多慢慢学。3.鼠标按下和松开时所用的事件代码。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>鼠标拖拽事件</title>
	</head>
	<body>
		<div id="box" class="box">
			<div id="drop" class="hd">注册信息（可以拖拽）
			<span id="box_close">【关闭】</span>
			</div>
			<div class="bd"></div>
		</div>
		<script>
			var box = document.getElementById('box');
			var drop = document.getElementById('drop');
			drop.onmousedown = function(event){
				var event =event || window.event;
				var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
				var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
				var spaceX = pageX -box.offsetLeft;
				var spaceY = pageY -box.offsetTOP;
			};
			document.onmousemove = function (event){
				var event = event || window.event;
				var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
				var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
				box.style.left = pageX - spaceX +'px';
				box.style.top =pageY -spaceY +'px';
				if(window.getSelection){
					window.getSelection().removeAllRanges();
				}else{
					document.selection.empty();
				}
			};
			
		</script>
		
	</body>