Javascript 如何知道 DOM 元素何时移动或调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3444719/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to know when an DOM element moves or is resized
提问by slolife
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?
也许元素级别没有移动/位置/调整大小事件，所以如果有一个页面/文档级别的事件会告诉我页面已重新绘制，我可以检查是否需要再次调用函数？
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，我希望它跟踪它最初覆盖的元素。实际上将其锚定到基础元素。
采纳答案by bobince
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 resizeevent too (and scrollif 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.
一般情况下，您无法获得元素移动/调整大小的回调；您必须不断检查间隔轮询器中的尺寸，这会使其响应性降低。您也可以通过在窗口resize事件上调用检查器来改进这一点（scroll如果涉及溢出或固定定位。您还可以添加 DOM Mutation Event 侦听器以在元素从文档树中删除时获得通知，但这在所有浏览器。
Can't you do an overlay with plain CSS? eg. put position: relativeon the element to be obscured, then add the overlay inside it, with the following?
你不能用普通的 CSS 做一个覆盖吗？例如。放上position: relative要遮住的元素，然后在里面添加叠加层，下面是？
position: absolute;
z-index: 10;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.5;
回答by Harsha Ivaturi
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 resizeevent, just like a window.
该<object>元素的内容有一个本地resize的事件，就像一个窗口。
回答by jmar777
There's a (Ben Alman) plugin for that.TM
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.
这是一个很好的插件，尽管我建议谨慎使用它（即，不要在太多元素上使用），以减少轮询量。
