Мне необходимо получить значения элемента, желательно без "костылей"
Никак нельзя?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>выпвып</title>
</head>
<body>
<div id="box" style="width: 100px; height: 100px; background: green; position: absolute; left: 200px;"></div>
<div id="clientX" style="position: absolute; top: 120px; left: 50px;"></div>
<div id="clientY" style="position: absolute; top: 150px; left: 50px;"></div>
<div id="pageX" style="position: absolute; top: 120px; left: 100px;"></div>
<div id="pageY" style="position: absolute; top: 150px; left: 100px;"></div>
<div id="offsetX" style="position: absolute; top: 120px; left: 150px;"></div>
<div id="offsetY" style="position: absolute; top: 150px; left: 150px;"></div>
<script>
function func(e) {
var clientX = document.getElementById("clientX");
var clientY = document.getElementById("clientY");
var pageX = document.getElementById("pageX");
var pageY = document.getElementById("pageY");
var offsetX = document.getElementById("offsetX");
var offsetY = document.getElementById("offsetY");
clientX.innerHTML = "cX" + e.clientX;
clientY.innerHTML = "cY" + e.clientY;
pageX.innerHTML = "pX" + e.pageX;
pageY.innerHTML = "pY" + e.pageY;
offsetX.innerHTML = "oX" + e.offsetX;
offsetY.innerHTML = "oY" + e.offsetY;
}
document.getElementById("box").addEventListener("mousemove", func);
</script>
</body>
</html>