单击时如何计算具有绝对位置的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：

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

阅读更多：

• 屏幕X/Y、客户端X/Y和页面X/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>