Верхняя часть смещения jQuery работает неправильно

Я пытаюсь создать script рисовать что-то в элементе с помощью мыши, и я использую Raphaeljs для этого.

Для правильного рисования мне нужно найти top и left элемента input‍‍. Я использую var offset = $("#input").offset(); для получения left и top.

Но значение top неверно. Он 10px ниже, чем реальное расстояние top. Я думаю, что 10px может измениться в разных разрешениях, тогда я не могу добавить 10px к нему обычно, тогда Я хочу знать, как я могу исправить эту проблему!

Я загрузил свой тест здесь.

ОТВЕТЫ

Ответ 1

Функция jQuery .offset() имеет это ограничение:

Примечание. jQuery не поддерживает получение смещенных координат скрытых элементов или учет границ, полей или отступов, установленных на элементе body.

Тело в этом случае имеет верхнюю границу 10px, поэтому ваш рисунок отключен на 10 пикселей.

Рекомендуемое решение:

var offset = $("#input").offset();
x = x - offset.left - $(document.body).css( "border-left" );
y = y - offset.top + $(document.body).css( "border-top" );

Ответ 2

У меня есть два разных решения:

1) Вы можете рассчитать общую высоту элемента с помощью метода externalHeight (true). Этот метод будет вычислять высоту с полями, прокладками и границами.

И этот не будет создавать конфликт, он вернет истинное значение. Вот пример jsFiddle.

HTML

<div class="header"></div>
<div class="nav"></div>
<div class="myEle"></div>

JQuery

var myEleTop = $('.header').outerHeight(true) + $('.nav').outerHeight(true);

2) Если вы определили top css для элемента, который помещен относительно тела, вы также можете использовать это значение:

parseInt($('#myEle').css('top'));

Ответ 3

После долгой борьбы и рассмотрения различных потенциальных ответов я пришел к выводу, что jQuery offset(). top (и, предположительно, DOM API, который он использует) слишком ненадежен для общего использования. Он не только документируется как исключение полей уровня html, но также возвращает неожиданные результаты в нескольких других случаях.

position(). top работает, но может быть нецелесообразно проектировать страницу так, чтобы она была эквивалентной.

К счастью, я обнаружил, что element.getBoundingClientRect(). top отлично позиционирует позицию относительно окна просмотра. Затем вы можете добавить $(документ).scrollTop(), чтобы получить позицию из верхней части документа, если это необходимо.