我创建表,处理程序将鼠标移动起来。但是在左上角,我得到.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>
获取元素内鼠标坐标的最准确方法是通过计算之间的差
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%)
,返回的值仍然正确。