单击时如何计算带绝对位置的div的左上角

你可以用 clientX / clientY 事件的属性来获取单击的位置

clientX 和 clientY ,而不是 pageX pageY . 另外,注意你必须 position: absolute

和

相对于浏览器中完全呈现的内容区域的左上角[…] 这个点可能在浏览器窗口的任何地方,如果页面中嵌入了可滚动页面,并且用户移动了滚动条,那么它实际上可以改变位置。

screenX screenY :

相对于物理屏幕/监视器的左上角。

:

相对于内容区域的左上边缘( ) 浏览器窗口的。即使用户在浏览器中移动滚动条,此点也不会移动。

阅读更多:

• What is the difference between screenX/Y, clientX/Y and pageX/Y?

document.addEventListener("click", e => {
    console.log(e.clientX, e.clientY);
    let modal = document.getElementById("modal");
    modal.style.top = e.clientY+"px";
    modal.style.left = e.clientX+"px";
});

#modal {
    position: absolute;
    width: 100px;
    height: 200px;
    background: blue;
}

<div id="modal"></div>