Question

我想获取光标相对于我网站页面的位置，而不是相对于其显示在屏幕上的位置

<script>
function show_coords(event) {
document.getElementById("sidebar").innerHTML = "X= " + event.clientX + "<br>Y= " + event.clientY;
}
</script>

<body> 
<style>
body {
margin: 0;
}

.main {
padding: 0px;
width: 100%;
height: 100vh;
overflow: auto;
cursor: move;
}

.main img {
height: auto;
width: 100%;
}

#sidebar {
position: fixed;
display: block;
width: 150px;
height: 100%;
top: 15%; 
left: 0%;
font-size: 100%;
z-index: 3; 
}
</style>
<div class="main dragscroll" ondblclick="show_coords(event)">
<img id="map" src="https://cdn.glitch.com/f6ccc989-c4e6-4876-925d- 
5c75e6d3cf19%2FRed-Dead-Redemption-2-Full-World-Map.png?1547325193157"/>
</div>
<div id="sidebar"></div> 
</body>

V此图片中的更多细节V

Answer 1

您可以尝试使用pageX，它相对于浏览器中完整呈现的内容区域的左上角。

screenX也是另一种选择

两者之间的区别在于，screenX考虑物理监视器的左上角，其中pageX相对于整个文档的左边缘

如何获得相对于页面而不是相对于Javascript屏幕的鼠标坐标？

1 个答案: