I'；我试图让一个div元素跟随我的鼠标（javascript），但它一直在出错

我一直试图用javascript让div元素跟随我的鼠标，但它一直在左上角闪烁。这是我的密码： HTML:

CSS:

正文{
保证金：0；
填充：0；
溢出：隐藏；
背景色：#77dd77；
}
div{
位置：绝对位置；
转换：翻译（-50%，-50%）；
高度：35px；
宽度：35px；
边界半径：50%；
边框：2件纯黑；
}

JavaScript:

document.addEventListener（'mousemove'，函数（e）{
让body=document.querySelector（'body'）；
让circle=document.getElementById（'circle'）；
设left=e.offsetX；
设top=e.offsetY；
circle.style.left=左+‘px’；
circle.style.top=top+px；
});

---

我仍然很难弄清楚错误是发生在CSS还是JavaScript中。有人能帮忙吗？

您应该使用

e.pageY

和

e.pageX

而不是

e.offset…

，因为

page…

与文档整体相关<代码>偏移量…相对于父容器（在本例中为

主体

），并且由于

主体

没有高度（因为它的子容器具有绝对位置），

偏移量…

的鼠标检测不一致

let circle=document.getElementById（'circle'）；
const onMouseMove=（e）=>{
circle.style.left=e.pageX+'px'；
circle.style.top=e.pageY+'px'；
}
document.addEventListener（'mousemove'，onMouseMove）
正文{
保证金：0；
填充：0；
溢出：隐藏；
背景色：#77dd77；
}
div{
位置：绝对位置；
转换：翻译（-50%，-50%）；
高度：35px；
宽度：35px；
边界半径：50%；
边框：2件纯黑；
}

谢谢！五分钟后我会接受这个答案。偏移量和。。。“还有佩奇…？”当然是霍尼普普。我更新了答案来解释差异。基本上，
page…
相对于整个文档起作用，而
offset…
仅相对于父容器起作用。在这种情况下，父容器（
body
）实际上没有高度，因为它的子容器位于
absolute
，因此无法准确确定偏移量，从而导致故障<代码>页面…

在这种情况下更可靠。