单击时如何计算具有绝对位置的div的左侧和顶部

Question

我有一些带有“点击”事件的项目。当我单击此项目时，我必须在单击位置显示模态。此模态具有绝对位置。

我尝试获取 event.pageX 和 event.pageY

let style = 'top: ' + event.pageX+ 'px; left: ' + event.pageY + 'px;';

但我的模态显示很远（看屏幕）

http://joxi.ru/brRa073u7J73vA

Answer 1

您可以使用clientX/clientY事件的属性来获取点击的位置

Answer 2

您可能正在寻找clientX 和clientY，而不是pageX 和pageY。另外，请注意，您必须将 position: absolute 放在您要放置的模态上，以便它可以按您期望的那样工作（如果您对定位不太熟悉，您绝对应该阅读它 - 它是不像听起来那么简单）。

pageX 和 pageY：

相对于浏览器中完全呈现的内容区域的左上角 [...] 如果页面中嵌入了嵌入的可滚动页面并且用户移动滚动条。

screenX 和 screenY：

相对于物理屏幕/显示器的左上角。

clientX 和 clientY：

相对于浏览器窗口的内容区域（视口）的左上边缘。即使用户从浏览器中移动滚动条，该点也不会移动。

阅读更多：

• 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>