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

Question

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

我正在使用jQuery,所以可以接受简单的javascript或jQuery答案.

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

背景

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

Answer 1

我不认为这个解决方案在这么久之后会有所帮助,但是基于此处提供的溢出和下溢事件,这是一个很好的跨浏览器解决方案

为了启用我们调整大小的侦听魔法,我们将一个对象元素注入到目标元素中,设置一个特殊样式列表以将其隐藏在视图中,并监视它以进行调整大小 - 它作为触发器,在目标元素父级调整大小时向我们发出警报.

该<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;