检测重排或移动HTML元素？

我构建了一个UI小部件，在实际小部件下方显示一个浮动弹出窗口。它使用绝对定位将它自己放置在小部件下面。我担心的是当文档布局发生变化时，绝对定位的元素不在我的UI小部件下面。检测重排或移动HTML元素？

有没有办法检测HTML元素是否已移动或重排？

2010-11-17 Tower

我找到可接受的解决方案。

每当显示浮动弹出窗口时，我会创建一个间隔，每隔250毫秒再次计算其位置（如果父级的位置已更改）。弹出隐藏或关闭时，我结束计时器。

2010-12-11 11:22:48 Tower

在Firefox中，您可能想尝试[MozAfterPaint]（https://developer.mozilla.org/en/Gecko-Specific_DOM_Events#MozAfterPaint）以获得更好的性能 – user123444555621 2010-12-11 16:25:03

这是我们最初获得的直观解决方案。我有和你一样的问题，但不想做这个解决方案，因为它不是很好的性能。 – 2014-12-17 11:52:35

如何使用相对定位并将您的小部件附加到实际的小部件？这样，它将始终保持与原始小部件相同的位置。

来源

2010-11-17 17:49:40 casablanca

我也想到了这一点，但我需要弹出窗口来保持页面上每个其他元素的顶部......并且z-index不能用于相对定位。 – Tower 2010-11-17 18:02:58

您可以将元素附加到body标签，并根据鼠标的位置将其放置在页面上。这就是jQuery UI对话框和工具提示类型脚本如何解决z-index问题。

这样的事情，如果你有jQuery的：

$('#clickelement').click(function(e){ 
    $('#yourlayer').appendTo('body').css({left: e.pageX + 'px',top: (e.pageY + 12) + 'px',zIndex:'10001'}).show(); 
}); 

#yourlayer{ 
    display:none; 
    position:absolute; 
    width:300px; 
}

编辑：固定轻微错字

来源

2010-11-17 19:02:02 ErikPhipps

我刚刚意识到这不会帮助，如果你的意思是回流，因为实时调整大小/回流。也许你可以得到你的容器元素的底部位置，并用它来定位你的图层。我从来没有尝试过，所以不确定它是否可行。 – ErikPhipps 2010-11-17 19:30:23

检测重排或移动HTML元素？

回答

相关问题