听课笔记(八)

最新推荐文章于 2018-10-10 16:38:41 发布

ling_玲玲

最新推荐文章于 2018-10-10 16:38:41 发布

阅读量216

点赞数

分类专栏： js基础知识文章标签： js事件

本文链接：https://blog.csdn.net/weixin_40518538/article/details/81705624

版权

js基础知识专栏收录该内容

10 篇文章 0 订阅

订阅专栏

事件分类:

鼠标事件:

click ,mousedown,mousemove,mouseup,contextmenu,mouseover,mouseup,mouseenter,mouseleave

click = mousedown + mouseup

移动小方块简单

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div style="width:200px;height:200px;background-color: red;position:absolute;left:0px;top:0px"></div>
	<script type="text/javascript">
	 	var div = document.getElementsByTagName('div')[0];
	  	function drag(elemt) {
	  	elemt.onmousedown = function (e)
	 	{
		  	console.log(e)
		  	var disX = e.pageX - parseInt(elemt.style.left);
		  	var disY = e.pageY - parseInt(elemt.style.top);
		  	document.onmousemove = function (e) {
		  	var event = e || window.event;
		  	console.log(e.pageX,e.pageY);
		  	elemt.style.left = e.pageX -disX + 'px';
		  	elemt.style.top = e.pageY -disY + 'px';
	 		}
	     	document.onmouseup = function (e)
		    {
		     	document.onmousemove = null
		    }
 		}

  }
  drag(div);
</script>
</body>
</html>

想了解关于js的event对象,可以参考 http://www.cnblogs.com/zxktxj/archive/2012/02/26/2369176.html