JavaScrip学习笔记3--event事件、拖拽

最新推荐文章于 2023-12-21 21:20:12 发布

谦_duke

最新推荐文章于 2023-12-21 21:20:12 发布

阅读量364

点赞数

本文链接：https://blog.csdn.net/rickyduke/article/details/50618519

版权

1、document

如果想要给整个页面添加事件，可以给document加事件。

document.οnclick=function()
{

}

2、什么是event对象？

用来获取事件的详细信息：鼠标位置、键盘按键

<!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>无标题文档</title>
<script>
window.οnlοad=function ()
{
	document.οnclick=function (ev)
	{
		//处理兼容性写法，火狐ev，IEevent
		var oEvent=ev||event;
		document.title='('+oEvent.clientX+','+oEvent.clientY+')';	
	}
}
</script>
</head>

<body>
</body>
</html>

获取鼠标位置

<!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>无标题文档</title>
<style>
body {height:2000px;}
#div1 {width:100px; height:100px; background:red; position:absolute;}
</style>
<script>
//封装了获取鼠标位置的函数
function getPos(ev)
{
	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
	var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;	
	return {x: scrollLeft+ev.clientX, y: scrollTop+ev.clientY};
}

document.οnmοusemοve=function (ev)
{
	var oDiv=document.getElementById('div1');
	var oEvent=ev||event;
	var pos=getPos(oEvent);
	oDiv.style.top=pos.y+'px';
	oDiv.style.left=pos.x+'px';
}

</script>
</head>

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

类似老鹰抓小鸡效果

<!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>无标题文档</title>
<style>
body {height:2000px;}
div {width:10px; height:10px; background:red; position:absolute;}
</style>
<script>
//封装了获取鼠标位置的函数
function getPos(ev)
{
	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
	var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;	
	return {x: scrollLeft+ev.clientX, y: scrollTop+ev.clientY};
}

document.οnmοusemοve=function (ev)
{
	var aDiv=document.getElementsByTagName('div');
	var oEvent=ev||event;
	var pos=getPos(oEvent);
	
	for(var i=aDiv.length-1;i>0;i--)
	{
		//后一个跟着前一个
		aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
		aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
	}
	
	aDiv[0].style.top=pos.y+'px';
	aDiv[0].style.left=pos.x+'px';
}

</script>
</head>

<body >
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</body>
</html>

键盘控制左右运动

<!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>无标题文档</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
</style>
<script>
document.οnkeydοwn=function (ev)
{
	var oEvent=ev||event;
	var oDiv=document.getElementById('div1');
	if(oEvent.keyCode==37)
	{
		oDiv.style.left=oDiv.offsetLeft-10+'px';
	}
	if(oEvent.keyCode==39)
	{
		oDiv.style.left=oDiv.offsetLeft+10+'px';
	}
}
</script>
</head>

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

3、拖拽

<!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>无标题文档</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
/*.box {border:1x dashed black; position:absolute;}*/
</style>
<script>
window.οnlοad=function ()
{
	var oDiv=document.getElementById("div1");
	
	var disX=0;
	var disY=0;
	
	oDiv.οnmοusedοwn=function (ev)
	{
		var oEvent=ev||event;
		
		disX=oEvent.clientX-oDiv.offsetLeft;
		disY=oEvent.clientY-oDiv.offsetTop;	
		
		document.οnmοusemοve=function (ev)
		{
			var oEvent=ev||event;
			var l=oEvent.clientX-disX;	
			var t=oEvent.clientY-disY;	
			
			oDiv.style.left=l+'px';
			oDiv.style.top=t+'px';
		}
		
		document.οnmοuseup=function ()
		{
			document.οnmοusemοve=null;
			document.οnmοuseup=null;
		}
	}	
	
	
}
</script>
</head>

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

4、带虚线框拖拽

<!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>无标题文档</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
.box {border:1px dashed black; position:absolute;}
</style>
<script>
window.οnlοad=function ()
{
	var oDiv=document.getElementById("div1");
	
	var disX=0;
	var disY=0;
	
	oDiv.οnmοusedοwn=function (ev)
	{
		var oEvent=ev||event;
		
		disX=oEvent.clientX-oDiv.offsetLeft;
		disY=oEvent.clientY-oDiv.offsetTop;	
		//创建虚线框
		var oBox=document.createElement('div');
		oBox.className='box';
		//设置虚线框的宽高跟div宽高相同
		oBox.style.width=oDiv.offsetWidth-2+'px';
		oBox.style.height=oDiv.offsetHeight-2+'px';
		//设置虚线框的位置跟div的位置相同
		oBox.style.left=oDiv.offsetLeft+'px';
		oBox.style.top=oDiv.offsetTop+'px';
		//将虚线框加入到body中去
		document.body.appendChild(oBox);
		
		document.οnmοusemοve=function (ev)
		{
			var oEvent=ev||event;
			var l=oEvent.clientX-disX;	
			var t=oEvent.clientY-disY;	
			
			oBox.style.left=l+'px';
			oBox.style.top=t+'px';
		}
		
		document.οnmοuseup=function ()
		{
			document.οnmοusemοve=null;
			document.οnmοuseup=null;
			//拖拽松开之后将div的位置设置到与虚线框相同位置上
			oDiv.style.left=oBox.offsetLeft+'px';
			oDiv.style.top=oBox.offsetTop+'px';	
			
			document.body.removeChild(oBox);
		}
		
		return false;
	}	
	
	
}
</script>
</head>

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