offsetTop vs. jQuery.offset().top

Question

我已阅读offsetLeft并且offsetTop在所有浏览器中都无法正常工作. jQuery.offset()应该为此提供一个抽象,以提供正确的值xbrowser.

我想要做的是获取相对于元素左上角单击元素的位置的坐标.

问题是jQuery.offset().top实际上在FFX 3.6中给我一个十进制值(在IE和Chrome中,两个值匹配).

http://jsfiddle.net/htCPp/展示了这个问题.如果单击底部图像,则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()在获取coords时基本上做的事情:

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中不支持BTW)
• docElem.clientTop 是元素顶部边框的宽度(在本例中为文档)
• elem.getBoundingClientRect()获取相对于文档 视口的坐标(请参阅注释).它可能会返回分数值,因此这是您的bug的来源.当页面被缩放时,它也可能导致IE <8中的错误.要避免分数值,请尝试迭代计算位置

结论

• 如果您想要相对于父节点的 coords ,请使用element.offsetTop.添加element.scrollTop如果你想利用母公司滚动进去.(或者如果您是该库的粉丝,请使用jQuery .position())
• 如果你想要相对于视口使用的坐标element.getBoundingClientRect().top.添加window.pageYOffset如果你想利用文档滚动进去.clientTop如果文档没有边框(通常没有边框),则不需要减去文档,因此您具有相对于文档的位置
• element.clientTop如果不将元素边框视为元素的一部分,则减去

Answer 2

我认为你是对的,说人们不能点击半像素,所以个人而言,我会使用舍入的jQuery偏移...

Answer 3

尝试这个： parseInt(jQuery.offset().top, 10)