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

最新推荐文章于 2023-04-15 14:26:26 发布

红豌豆

最新推荐文章于 2023-04-15 14:26:26 发布

阅读量281

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_64353584/article/details/123012513

版权

本文介绍如何封装一个JavaScript函数来获取鼠标点击的位置，强调其减少代码量、清晰界面和代码复用的优势。文中提到使用document.documentElement.scrollTop||document.body.scrollTop进行滚动高度的兼容处理。

摘要由CSDN通过智能技术生成

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

使用封装函数的优点：

1.减少代码量

2.代码界面更加一目了然

3.利于代码的多次利用

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;