原生js获取鼠标在盒子上的位置pageX、pageY、offsetTop、offsetLeft

最新推荐文章于 2022-03-10 14:06:43 发布

每一天，每一步

最新推荐文章于 2022-03-10 14:06:43 发布

阅读量1.4k

点赞数

分类专栏： javaScript 文章标签： js javascript css dom

本文链接：https://blog.csdn.net/u010234868/article/details/118531221

版权

javaScript 专栏收录该内容

136 篇文章

订阅专栏

这个博客展示了如何在HTML中创建一个带有粉红色背景的方块，并通过JavaScript监听其点击事件。当用户点击该方块时，代码将计算鼠标在方块内的位置并输出到控制台。这涉及到了网页元素的定位、事件处理和页面坐标系统的理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body {
			margin: 0;
			/*添加高度使其出现滚动条*/
			height: 1000px;
		}
		#box {
			width: 200px;
			height: 200px;
			background-color: pink;
			margin: 100px;
			/*添加margin-top*/
			margin-top: 500px;
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<script src="js/common.js"></script>
	<script>
		var box = document.getElementById('box');
		box.onclick = function (e) {
			// 获取盒子在页面上的位置
			// console.log(this.offsetLeft);
			// console.log(this.offsetTop);

			e = e || window.event;

			// 鼠标在盒子上的位置 = 鼠标坐标 - 盒子坐标
			var x = getPage(e).pageX - this.offsetLeft;
			var y = getPage(e).pageY - this.offsetTop;
			console.log(x, y);
		}
	</script>
</body>
</html>

// common.js
// 获取鼠标在页面上的位置，兼容性处理
function getPage(e) { // 传入参数e
	e = e || window.event;
	var pageX = e.pageX || e.clientX + getScroll().scrollLeft;
	var pageY = e.pageY || e.clientY + getScroll().scrollTop;
	return {
		pageX: pageX,
		pageY: pageY
	}
}