Экран Координаты элемента, через Javascript

Я пытаюсь получить координаты экрана (то есть относительно верхнего левого угла экрана) элемента в окне браузера. Легко получить размер и положение окна (screenX, screenY) и легко (с помощью jQuery) получить смещение элемента ($ ('element'). Offset(). Left).

Тем не менее, мне нужно знать, сколько пикселей от элемента до угла экрана. Я нашел некоторые вещи, которые кажутся специфичными для IE, но я бы хотел, чтобы это работало в максимально возможном количестве браузеров.

Отредактировано, чтобы добавить изображение:

Ответ 1

window.screenX/Y не поддерживаются в IE. Но для других браузеров близкое приближение позиции:

var top = $("#myelement").offset().top + window.screenY;
var left = $("#myelement").offset().left + window.screenX;

Точная позиция зависит от того, какие панели инструментов видны. Вы можете использовать свойства outer/innerWidth и outer/innerHeight объекта window для приблизительного приближения.

IE не очень сильно влияет на свойства окна, но, как ни странно, объект события клика предоставит вам местоположение экрана щелчка. Поэтому я предполагаю, что у вас может быть страница калибровки, которая просит пользователя "щелкнуть красную точку" и обработать событие с помощью

function calibrate(event){
    var top = event.screenY;
    var left = event.screenX;
}

Или, возможно, используйте события mouseenter/leave, используя координаты этого события для калибровки. Хотя у вас возникнут проблемы с определением, была ли указана мышь слева, справа, сверху или снизу.

Конечно, как только они перемещают экран, вам нужно будет перекалибровать.

Для получения дополнительной информации о совместимости свойств браузера см. Таблицы объектной модели PPK.

Ответ 2

Я не думаю, что это возможно.

Координаты элемента относятся к верхнему левому углу отображаемой страницы.

Координаты окна относительно экрана.

Насколько мне известно, ничто не связывает верхний левый угол отображаемой страницы в верхнем левом углу окна. Таким образом, нет возможности учитывать границы, полосы прокрутки, хром и т.д. Поэтому я думаю, что вы потоплены на этом.

Ответ 3

Я не согласен с ответом на jvenema.

Я нашел решение, которое работает для меня на google chrome в любом случае, но я надеюсь, что это будет работать и во многих других браузерах (возможно, не на некоторых старых интернет-исследователях).

В тегах <script> объявляются новые две переменные global, называемые: pageX и pageY с ключевым словом var.

Эти глобальные переменные всегда должны сохранять координаты верхнего левого угла отображаемой страницы относительно верхнего левого угла экрана монитора, но для достижения этой цели window.onmousemove следует ссылаться на функцию, которая устанавливает pageX к разнице событий .screenX и event.clientX, а pageY - к различию event.screenY и event.clientY.

Тогда все, что вам нужно сделать, это получить координаты элемента (относительно верхнего левого угла отображаемой страницы) и добавить pageX и pageY. Результатом этих выражений будут координаты этого элемента относительно верхнего левого угла экрана монитора!

Пример кода (только javascript):

<script>
    var pageX;
    var pageY;
    window.onmousemove = function (e) {
       pageX = e.screenX - e.clientX;
       pageY = e.screenY - e.clientY;
    }
    function getScreenCoordinatesOf(obj) {
       var p = {};
       p.x = pageX + obj.clientLeft;
       p.y = pageY + obj.clientTop;
       return p;
    }
</script>

Надеюсь, что это поможет!