javascript mousemove over element - 获得精确的鼠标位置 XY
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10327754/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
mousemove over element - get exact mouse position X Y
提问by Mediator
I create table, handlers hooked up mousemove. But in top left point I get .offsetX.offsetY equals -5-5. Why? I need 0\0.
我创建表，处理程序连接mousemove。但在左上角我得到 .offsetX.offsetY 等于 -5-5。为什么？我需要 0\0。
<table cellpadding="0"
id="target"
cellspacing="0"
width="602"
height="500"
style="float:left;
position:relative;
background: url(/content/games/kamikaze2/back.jpg) no-repeat 0 0;">
<tbody>...
</tbody>
</table>
<script type="text/javascript">
$("#target").mousemove(function (event) {
var msg = "Handler for .mousemove() called at ";
msg += event.offsetX + ", " + event.offsetY;
$("#log").append("<div>" + msg + "</div>");
});
</script>
回答by Roko C. Buljan
The most accurate way to get the mouse coordinates within an element is by calculating the difference between
获取元素内鼠标坐标的最准确方法是计算
const getMousePos = (evt) => {
const pos = evt.currentTarget.getBoundingClientRect();
return {
x: evt.clientX - pos.left,
y: evt.clientY - pos.top
};
};
document.querySelector("#target").addEventListener('mousemove', (evt) => {
const mPos = getMousePos(evt);
evt.currentTarget.textContent = `Mouse position x:${mPos.x} y:${mPos.y}`;
});#target {
position: absolute;
left: 50px;
top: 20px;
width: 200px;
height: 100px;
background: #0bf;
transform: translate(20px, 30px); /* works even with translate */
}<div id="target"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Subtracting those values you can retrieve the exact mouse position, x:0, y:0being the upper left corner of your element. Even if an element is CSS-transformed, i.e: transform: translate(-50%, -50%), the returned values are still correct.
减去这些值，您可以检索精确的鼠标位置，x:0，y:0是元素的左上角。即使元素经过 CSS 转换，即: transform: translate(-50%, -50%)，返回值仍然是正确的。
