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

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

阅读更多：

• screenX / Y，clientX / Y和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>