当前位置：网站首页>JS to realize the encapsulation of the function of obtaining the mouse click position

JS to realize the encapsulation of the function of obtaining the mouse click position

2022-06-25 05:51:00 【The rain fell on the city with a smile】

A good function can be designed as a tool , Variables are used where changes occur [ That is, the parameters that need to be passed in by the developer ], What does not change is the logical area , So you can call... Anywhere .

Advantages of using encapsulated functions ：

1. Reduce the amount of code

2. The code interface is more clear

3. It is conducive to multiple use of code

 document.documentElement.scrollTop||document.body.scrollTop; This is a compatible practice , If you can't get from document Get the scrolling height of the element , From body In order to get .

<!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; // Scrolling height 
			var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft; // Rolling time left Value 
			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>

原网站

版权声明
本文为[The rain fell on the city with a smile]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202201254476202.html

边栏推荐

猜你喜欢

随机推荐