Как рассчитать левый и верхний для div с абсолютной позиции при нажатии

Question

У меня есть некоторые предметы с событием "click".Когда я нажимаю на эти элементы, я должен показывать модальное место вместо щелчка.Этот модал имеет абсолютную позицию.

Я пытаюсь получить event.pageX и event.pageY

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

, но мой модал показывает очень далеко (посмотрите на экран)

http://joxi.ru/brRa073u7J73vA

Answer 1

Вы, вероятно, ищете 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>

Answer 2

Вы можете использовать clientX / clientY свойства события, чтобы получить место клика