单击

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>