0
点赞
收藏
分享

微信扫一扫

js实现获取鼠标点击位置函数的封装

夹胡碰 2022-02-18 阅读 188

好的函数可以设计为一种工具,变化的地方采用变量[也就是需要开发者自己传进传进来的参数],不变的就是逻辑区,这样在任何地方都可以调用。

 document.documentElement.scrollTop||document.body.scrollTop; 这是兼容做法,如果无法从document的元素获取滚动高度,就从body中获取。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		#box{
			width: 200px;
			height: 200px;
			background-color: green;
			position: absolute;
		}
		</style>
		<script>
		function getPost(ev){
			var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; //滚动的高
			var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft; //滚动时left的值
			return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};
		}
		document.onmousemove=function(ev){
			var oEvent = ev||event;
			var oDiv = document.getElementById('box');
			var post = getPost(oEvent);
			oDiv.style.left=post.x+'px';
			oDiv.style.top=post.y+'px';
		}
		</script>
	</head>
	<body>
		<div style="height: 1200px;">
			<div id="box"></div>
		</div>
	</body>
</html>
举报

相关推荐

0 条评论