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

Question

我想知道是否有DOM事件可以监听，告诉我DOM元素何时在页面上移动、重新定位或调整大小。我指的不是元素被拖放。例如，如果我在页面上有一个包含三个项的列表，并使用JS将前两个列表项之一从页面中删除（或隐藏等），我希望当第三个列表项向上移动时附加处理程序运行。

我正在使用jQuery，因此纯JavaScript或jQuery答案均可接受。

也许在元素级别没有移动/位置/调整大小事件，因此如果存在页面/文档级别事件，可以告诉我页面已重新绘制，然后我可以检查是否需要再次调用函数？

背景: 我在调用Web服务以删除该元素时，在元素上放置了一个透明的div。由于我需要绝对定位该覆盖层div，我希望它最初跟踪它覆盖的基本元素。实际上将其锚定到基本元素。

- slolife

Answer 1

我认为这个解决方案在这么长时间后已经不再相关了，但是这里有一个基于overflow和underflow事件的优秀跨浏览器解决方案，在这里介绍

为了启用我们的调整大小监听功能，我们会向目标元素注入一个object元素，并设置一系列特殊样式来将其隐藏，然后监视它的大小是否变化——它作为触发器，用于在目标元素的父级元素大小改变时向我们发出警报。

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

- Harsha Ivaturi

---

虽然这个答案已经超过一年了，链接也很有用，但如果您在这个网站上发布答案的基本部分，那就更好了，否则您的帖子可能会被删除请参阅FAQ中提到的“几乎只是一个链接”的答案。 如果您愿意，仍然可以包含链接，但只作为“参考”。答案应该能够独立存在，不需要链接的支持。 - Taryn

文章中描述的方法在尝试从已从DOM中移除的元素中删除监听器时会出现错误（在第60行contentDocument为null）。我认为一个简单的空值检查应该可以解决这个问题。 - C-F

Answer 2

通常情况下，你无法获得元素移动/调整大小的回调；你需要在一个间隔轮询器中不断检查尺寸，这会使其响应速度稍微降低。你可以通过在窗口resize事件上调用检查器来改善此问题，如果涉及溢出或固定定位，则还可以调用scroll事件。你还可以添加DOM变异事件监听器，以便在元素从文档树中删除时获得通知，但这在所有浏览器中都无法发挥作用。

难道你不能使用纯CSS来创建覆盖层吗？例如，在要被遮挡的元素上放置position: relative，然后在其中添加覆盖层，如下所示：

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

- bobince

---

我会尝试您关于将覆盖层放置在元素中的建议。此外，仅观察窗口调整大小和滚动可能有效... 我只需重新计算所有的覆盖层。 - slolife

似乎不起作用。我的基本元素（需要被遮挡的元素）是一个表格行（tr）。如果我将其位置设置为relative，并附加我的覆盖元素（$overlay.appendTo($tr)，这样看起来对吗？），并将其位置设置为absolute，则覆盖层会填满整个屏幕。 - slolife

Answer 3

这里有一个（Ben Alman）的插件可以解决这个问题。^TM

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

- jmar777

Answer 4

我很惊讶在这个帖子的回答中还没有提到resizeobserver。

ResizeObserver在检测调整大小方面非常有帮助。你可以通过它来检测调整大小。但是，检测移动是另一回事，我对此没有一个好的答案。ResizeObserver返回一个带有contentRect的元素，你可能期望它包含类似于getBoundingClientRect的页面上的位置，但实际上它与之不同，并且实际上可能会被弃用。

- Colin D