Я прочитал это 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
вместо этого или какой-то другой метод полностью?
источник
Об этом говорится в документации по API jQuery
.offset()
:Вот что говорит MDN Web API
.offsetTop
:Вот что в
.offset()
основном делает jQuery v.1.11 при получении координат: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)docElem.clientTop
ширина верхней границы элемента (в данном случае документа)elem.getBoundingClientRect()
получает координаты относительно области просмотрадокумента(см. комментарии). Он может возвращать дробные значения, так что это источник вашей ошибки. Это также может вызвать ошибку в IE <8 при увеличении страницы. Чтобы избежать дробных значений, попробуйте вычислить позицию итеративноЗаключение
element.offsetTop
. Добавьте,element.scrollTop
если вы хотите учитывать родительскую прокрутку. (или используйте jQuery .position () если вам эта библиотека)element.getBoundingClientRect().top
. Добавьте,window.pageYOffset
если хотите учесть прокрутку документа. Вам не нужно вычитать документ,clientTop
если у документа нет границы (обычно это не так), поэтому у вас есть позиция относительно документа.element.clientTop
если вы не рассматриваете границу элемента как часть элементаисточник
Element.getBoundingClientRect()
дает позиции относительно области просмотра , а не документаПопробуй это:
parseInt(jQuery.offset().top, 10)
источник
Возможно, что это
offset
может быть нецелое число, используяem
в качестве единицы измерения относительноеfont-sizes
в%
.Я также предполагаю, что это
offset
может быть не целое число, когдаzoom
это не так,100%
но это зависит от того, как браузер обрабатывает масштабирование.источник
Вы можете
parseInt(jQuery.offset().top)
всегда использовать значение Integer (примитив -int
) во всех браузерах.источник