offsetTop против jQuery.offset (). top

Question

Я прочитал, что offsetLeft и offsetTop не работают должным образом во всех браузерах.jQuery.offset() должен обеспечить абстракцию для правильного значения xbrowser.

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

Проблема в том, что jQuery.offset().top фактически дает мне десятичное значение в FFX 3.6 (в IE и Chrome оба значения совпадают).

Эта скрипка демонстрируетвопрос.Если щелкнуть нижнее изображение, jQuery.offset().top вернет 327,5, но offsetTop вернет 328.

Я хотел бы думать, что offset() возвращает правильное значение, и я должен использовать его, потому что оно будет работать черезбраузеры.Тем не менее, люди, очевидно, не могут нажимать на десятичные точки пикселей.Является ли правильный способ определения истинного смещения Math.round() смещения, которое возвращает jQuery?Должен ли я использовать offsetTop вместо этого или какой-то другой метод целиком?

Answer 1

Вот что JQuery API Doc говорит о .offset():

Получить текущие координаты первого элемента или установить координаты каждого элемента в наборе соответствующих элементов, относительные к документу .

Это то, что MDN Web API говорит о .offsetTop:

offsetTop возвращает расстояние текущего элемента относительно вершина узла offsetParent

Вот что в основном делает jQuery v.1.11 .offset() при получении координат:

var box = { top: 0, left: 0 };

// BlackBerry 5, iOS 3 (original iPhone)
if ( typeof elem.getBoundingClientRect !== strundefined ) {
  box = elem.getBoundingClientRect();
}
win = getWindow( doc );
return {
  top: box.top  + ( win.pageYOffset || docElem.scrollTop )  - ( docElem.clientTop  || 0 ),
  left: box.left + ( win.pageXOffset || docElem.scrollLeft ) - ( docElem.clientLeft || 0 )
};

• pageYOffset интуитивно говорит, сколько страниц было прокручено
• docElem.scrollTop - это запасной вариант для IE <9 (кстати, не поддерживается в jQuery 2) </li>
• docElem.clientTop - ширина верхней границы элемента (в данном случае документ)
• elem.getBoundingClientRect() получает координаты относительно документа область просмотра (см. Комментарии). Может возвращать значения дроби, так что это источник вашей ошибки. Также может вызвать ошибку в IE <8 </a>, когда страница масштабируется. Чтобы избежать дробных значений, попробуйте вычислить позицию итеративно

Заключение

• Если вы хотите координаты относительно родительского узла , используйте element.offsetTop. Добавьте element.scrollTop, если хотите учесть родительскую прокрутку. (или используйте jQuery .position () , если вы являетесь поклонником этой библиотеки)
• Если вы хотите координаты относительно области просмотра , используйте element.getBoundingClientRect().top. Добавьте window.pageYOffset, если хотите учесть прокрутку документа. Вам не нужно вычитать clientTop документа, если у документа нет границы (обычно это не так), поэтому у вас есть позиция относительно документа
• Вычтите element.clientTop, если вы не рассматриваете границу элемента как часть элемента

Answer 2

Я думаю, что вы правы, говоря, что люди не могут щелкнуть половину пикселя, поэтому лично я бы использовал округленное смещение jQuery ...

Answer 3

Попробуйте это: parseInt(jQuery.offset().top, 10)

Answer 4

Возможно, что offset может быть нецелым, используя em в качестве единицы измерения, относительно font-sizes в %.

Я также предполагаю, что offsetможет не быть целым числом, когда zoom не 100%, но это зависит от того, как браузер обрабатывает масштабирование.

Answer 5

Вы можете использовать parseInt(jQuery.offset().top), чтобы всегда использовать целочисленное значение (примитив - int) во всех браузерах.