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

I'd like to know if there is a DOM event to listen for that tells me when a DOM element moves is repositioned or is resized on the page. I am not talking about an elements being drag/dropped. An example is if a have a list of three items on a page, and I use JS to remove one of the top two list items from the page (or hide it or whatever), I'd like to attach a handler to run when the third list item gets moved up in the page.

我想知道是否有一个DOM事件来监听，当DOM元素的移动被重新定位或者在页面上调整大小时。我不是在说一个元素被拖放。一个例子是如果一个页面上的三个项目的列表,我用JS删除前两个列表项的页面(或隐藏),我想把一个处理程序运行当第三个列表项移动页面。

I am using jQuery, so plain javascript or jQuery answers are acceptable.

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

Maybe there are no move/position/resize events at the element level, so if there is a page/doc level event that will tell me that the page was repainted and I can check if I need to call a function again?

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

Background

背景

I put a transparent div over an element while a webservice call is made to delete that element. Since I need to absolutely position that overlay div, I want it to track the element that it covers initially. In effect anchoring it to the base element.

我在一个元素上放置一个透明的div，同时进行一个webservice调用来删除该元素。因为我需要确定叠加div的位置，所以我想让它跟踪它最初覆盖的元素。实际上是把它固定在基元上。

3 个解决方案

#1

You can't get a callback for element movement/resizing in general; you would have to keep constantly checking the dimensions in an interval poller, which would make it a bit less responsive. You could improve this by calling the checker on a window resize event too (and scroll if overflow or fixed positioning is involved. You could also add DOM Mutation Event listeners to get informed when elements are removed from the document tree, but this doesn't work in all browsers.

一般来说，您无法获得元素移动/调整大小的回调;您将不得不在一个间隔轮询器中不断地检查维度，这会使它的响应性降低一些。您还可以通过在窗口大小调整事件上调用checker来改进这一点(如果涉及到溢出或固定的定位，也可以进行滚动)。您还可以添加DOM突变事件侦听器，以便在从文档树中删除元素时得到通知，但这并不适用于所有浏览器。

Can't you do an overlay with plain CSS? eg. put position: relative on the element to be obscured, then add the overlay inside it, with the following?

难道你不能用普通的CSS来做叠加吗?如。放置位置:相对于要隐藏的元素，然后在其内部添加叠加，如下所示?

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

#2

I don't think this solution would be relevant after so long, but there's an excellent cross-browser solution based on the overflow and underflow events presented here

我不认为这个解决方案在这么长时间之后会有用，但是有一个基于溢出和欠流事件的优秀跨浏览器解决方案

To enable our resize listening magic, we inject an object element into the target element, set a list of special styles to hide it from view, and monitor it for resize – it acts as a trigger for alerting us when the target element parent is resized.

为了使我们的调整听力变魔术，我们将一个对象元素注入到目标元素中，设置一个特殊的样式列表来隐藏它，并监控它的大小——当目标元素的父元素被调整大小时，它会作为提醒我们的触发器。

The <object> element's content has a native resize event, just like a window.

#3

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

这里有一个(Ben Alman)插件

This is a good plugin, although I suggest using it sparingly (i.e., not on too many elements), so as to keep the amount of polling down.

这是一个很好的插件，尽管我建议谨慎使用它(例如。，而不是在太多的元素上)，以便保持轮询的数量。

#1