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

Question

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

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

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

Answer 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 .

Answer 2

Я не согласен с ответом Джвенемы.

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

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

Эти глобальные переменные всегда должны хранить координаты левого верхнего угла страницы , отображаемой относительно левого верхнего угла экрана монитора, но для достижения этой цели window.onmousemove следует ссылается на функцию, которая устанавливает pageX для разницы event.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>

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

Answer 3

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

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

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

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