如何知道DOM元素何时移动或调整大小

Question

我想知道是否有一个要监听的DOM事件告诉我DOM元素移动的时间是重新定位还是在页面上调整大小。我不是在谈论被拖放的元素。一个例子是如果一个页面上有三个项目的列表，我使用JS从页面中删除前两个列表项之一（或隐藏它或其他），我想附加一个处理程序来运行时第三个列表项在页面中向上移动。

我正在使用jQuery，因此可以接受简单的javascript或jQuery答案。

也许在元素级别没有移动/位置/调整大小事件，所以如果有一个页面/ doc级别事件会告诉我页面被重新绘制，我可以检查是否需要再次调用函数？

背景

我在一个元素上放置一个透明div，同时进行webservice调用以删除该元素。由于我需要绝对定位覆盖div，我希望它能够跟踪它最初覆盖的元素。实际上将它锚定到基本元素。

Answer 1

我不认为这个解决方案经过这么长时间才具有相关性，但是基于所提出的溢出和下溢事件，这是一个出色的跨浏览器解决方案here

  

为了启用我们调整大小的侦听魔法，我们将一个对象元素注入目标元素，设置一个特殊样式列表以将其从视图中隐藏，并监视它以调整大小 - 它作为触发器在目标元素时提醒我们父母的大小调整了。

<object>元素的内容具有原生resize事件，就像窗口一样。

Answer 2

一般情况下，您无法获得元素移动/调整大小的回调;你必须不断检查间隔轮询器中的尺寸，这会使响应性降低一些。您可以通过在窗口resize事件上调用检查器来改进这一点（如果涉及溢出或固定定位，则可以scroll。您还可以添加DOM Mutation事件侦听器，以便在从元素中删除元素时获取通知文档树，但这并不适用于所有浏览器。

你不能用普通的CSS做叠加吗？例如。将position: relative放在要遮盖的元素上，然后在其中添加叠加层，使用以下内容？

position: absolute;
z-index: 10;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.5;

Answer 3

There's a (Ben Alman) plugin for that.^TM

这是一个很好的插件，虽然我建议谨慎使用它（即不要使用太多元素），以便保持轮询量。