获取鼠标坐标

最新推荐文章于 2018-02-06 18:56:07 发布

weixin_30361641

最新推荐文章于 2018-02-06 18:56:07 发布

阅读量93

点赞数

原文链接：http://www.cnblogs.com/xiaozhuzhuandxiaomoney/p/7338174.html

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>获取鼠标坐标</title>
		<style>
			#mousedot{width:20px;height:20px;background:#ccc;position:absolute;top:0;left:0;}
		</style>
	</head>
	<body>
		<div id="mousedot"></div>
	</body>
</html>
<script>
	var mousedot=document.getElementById("mousedot");
	
	function mousePosition(e){
		if(e.pageX){
			//ie9及以上，其他浏览器均支持pageX属性
			return {x:e.pageX,y:e.pageY};

		}else{
			return{
				x:e.clientX + document.body.scrollLeft - document.body.clientLeft,
				y:e.clientY + document.body.scrollTop - document.body.clientTop,
			}
		}
	}
	function mousemove(e){
		var e=e|| window.event;
		var mosusepos=mousePosition(e);
		mousedot.style.left=mosusepos.x-mousedot.clientWidth/2+"px";
		mousedot.style.top=mosusepos.y-mousedot.clientHeight/2+"px";
	}
	
	document.οnmοusemοve=mousemove;
		
</script>

1、坐标值：

　　pageX：触发点相对于文档左上角的位置

　　clientX：触发点相对于浏览器左上角的位置

　　screenX：触发点相对于屏幕左上角的位置

2、原生js获取元素的宽高：

　　clientWidth、clientHeight 元素可视区的大小

转载于:https://www.cnblogs.com/xiaozhuzhuandxiaomoney/p/7338174.html