关于Jquery offset().top 在IE和Firefox下行为不一致的问题

最新推荐文章于 2020-12-17 19:15:06 发布

原创最新推荐文章于 2020-12-17 19:15:06 发布 · 865 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

jquery 专栏收录该内容

0 篇文章

订阅专栏

本文探讨了一个在使用JSTree库时遇到的跨浏览器问题，即在IE浏览器下拖动滚动条后，JSTree中的节点无法被点击，而在Firefox下则正常工作。通过深入分析JSTree源码，发现其在计算事件点击位置时存在特定条件，导致在iframe环境中出现问题。文章提供了修复方案，包括在获取元素偏移量时加入滚动条偏移值，确保在不同浏览器和环境下的一致性。

关于Jquery offset().top 在IE和Firefox下行为不一致的问题

By jonny on March 2, 2012

项目中用到了JSTree,原先一个页面里包含了很多的tab标签，而且每个tab标签内功能都很多，用到了大量的js代码，后来我们决定把tab里的内容分成不同的page，然后用iframe调用。

于是奇怪的问题出现了，在IE下面拖动滚动条后jstree的node怎么也点不了了，像事件丢失了一样。调试了一会貌似不是我代码的原因，于是到JSTree的源码里看看，结果看到下面这一句，他计算的事件点击在页面的position要在node的li高度范围内，这个不知道为啥要这样做，很是奇怪，但是这就是为什么在iframe里会出怪问题的原因。
if(trgt.is("ins") && event.pageY - trgt.offset().top < this.data.core.li_height)
{
this.toggle_node(trgt);
}

在ie下面当右边滚动条滚动后$(element).offset().top计算出来的值就不对了，必须要加document.documentElement.scrollTop 的值才能得到正确的结果，迫不得已，修补bug如下
var posY = 0;
if(window.parent!= window && $.browser.msie)
posY= (trgt.offset().top+document.documentElement.scrollTop);
else
posY= trgt.offset().top;
if(trgt.is("ins") && event.pageY - posY < this.data.core.li_height) { this.toggle_node(trgt); }

Jquery里也有人提到这个问题，不知道新版有没有修复此bug，附上地址供参考