极客笔记HTML 如何在不使用事件的情况下获取元素的pageX和pageY
在本文中，我们将介绍如何通过使用HTML来获取元素的pageX和pageY，而不需要依赖事件的触发。
阅读更多：HTML 教程
什么是pageX和pageY
在HTML中，pageX和pageY是指鼠标点击或鼠标移动时相对于页面左上角的坐标。利用这些坐标，我们可以进行一些与鼠标位置有关的操作。
获取元素的pageX和pageY
通常情况下，我们可以通过监听鼠标事件来获取元素的pageX和pageY。但是，如果我们不想依赖事件来获取这些值，可以借助其他属性和方法。
offsetLeft 和 offsetTop
元素的offsetLeft和offsetTop属性分别表示该元素相对于其最近的具有定位属性的父元素的左边界和顶边界的像素距离。通过将offsetLeft和offsetTop递归累加到最顶层的父元素，我们可以得到元素相对于页面左上角的坐标。
<!DOCTYPE html>
<html>
<head>
<style>
#myElement {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<div id="myElement"></div>
<script>
var element = document.getElementById("myElement");
var pageX = 0;
var pageY = 0;
while (element) {
pageX += element.offsetLeft;
pageY += element.offsetTop;
element = element.offsetParent;
}
console.log("pageX: " + pageX);
console.log("pageY: " + pageY);
</script>
</body>
</html>
在上述示例中，我们创建了一个id为”myElement”的div元素，并通过CSS设置其宽高、背景颜色和定位属性。在JavaScript中，我们通过offsetLeft和offsetTop属性将该元素的坐标累加到最顶层的父元素，最终得到元素相对于页面左上角的坐标。在控制台中输出了pageX和pageY的值。
getBoundingClientRect
另一种方法是使用元素的getBoundingClientRect方法。该方法返回一个DOMRect对象，该对象包含了元素的位置信息，包括相对于视口左上角的坐标。
<!DOCTYPE html>
<html>
<head>
<style>
#myElement {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<div id="myElement"></div>
<script>
var element = document.getElementById("myElement");
var rect = element.getBoundingClientRect();
var pageX = rect.left + window.pageXOffset;
var pageY = rect.top + window.pageYOffset;
console.log("pageX: " + pageX);
console.log("pageY: " + pageY);
</script>
</body>
</html>
在上述示例中，我们同样创建了一个id为”myElement”的div元素，并通过CSS设置其样式和定位属性。通过调用getBoundingClientRect方法，我们可以得到一个包含该元素位置信息的DOMRect对象。通过加上窗口的滚动偏移量（window.pageXOffset和window.pageYOffset），我们可以计算出元素相对于页面左上角的坐标。同样，在控制台中输出了pageX和pageY的值。
总结
在本文中，我们介绍了两种方法来获取元素的pageX和pageY，而不依赖事件的触发。通过利用offsetLeft、offsetTop属性以及递归累加的方式，或者通过使用getBoundingClientRect方法，我们可以准确获取元素相对于页面左上角的坐标。这些方法可以为我们处理一些鼠标位置相关的操作提供便利。