获取精确的相对鼠标位置X Y
获取精确的相对鼠标位置X Y
提问于 2012-04-26 13:34:27
我创建了表格，处理程序连接了鼠标移动。但是在左上角，我得到.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>回答 1
Stack Overflow用户
回答已采纳
发布于 2012-04-26 13:41:01
获取元素内鼠标坐标的最准确方法是计算
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>
减去这些值就可以得到确切的鼠标位置，x:0，y:0是元素的左上角。即使一个元素是CSS转换的，比如：transform: translate(-50%, -50%)，返回值仍然是正确的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10327754
复制相关文章
相似问题
腾讯云开发者
