我想知道是否有一个要监听的DOM事件告诉我DOM元素移动的时间是重新定位还是在页面上调整大小。我不是在谈论被拖放的元素。一个例子是如果一个页面上有三个项目的列表,我使用JS从页面中删除前两个列表项之一(或隐藏它或其他),我想附加一个处理程序来运行时第三个列表项在页面中向上移动。
我正在使用jQuery,因此可以接受简单的javascript或jQuery答案。
也许在元素级别没有移动/位置/调整大小事件,所以如果有一个页面/ doc级别事件会告诉我页面被重新绘制,我可以检查是否需要再次调用函数?
背景
我在一个元素上放置一个透明div,同时进行webservice调用以删除该元素。由于我需要绝对定位覆盖div,我希望它能够跟踪它最初覆盖的元素。实际上将它锚定到基本元素。
答案 0 :(得分:15)
我不认为这个解决方案经过这么长时间才具有相关性,但是基于所提出的溢出和下溢事件,这是一个出色的跨浏览器解决方案here
为了启用我们调整大小的侦听魔法,我们将一个对象元素注入目标元素,设置一个特殊样式列表以将其从视图中隐藏,并监视它以调整大小 - 它作为触发器在目标元素时提醒我们父母的大小调整了。
<object>
元素的内容具有原生resize
事件,就像窗口一样。
答案 1 :(得分:12)
一般情况下,您无法获得元素移动/调整大小的回调;你必须不断检查间隔轮询器中的尺寸,这会使响应性降低一些。您可以通过在窗口resize
事件上调用检查器来改进这一点(如果涉及溢出或固定定位,则可以scroll
。您还可以添加DOM Mutation事件侦听器,以便在从元素中删除元素时获取通知文档树,但这并不适用于所有浏览器。
你不能用普通的CSS做叠加吗?例如。将position: relative
放在要遮盖的元素上,然后在其中添加叠加层,使用以下内容?
position: absolute;
z-index: 10;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.5;
答案 2 :(得分:4)
There's a (Ben Alman) plugin for that.TM
这是一个很好的插件,虽然我建议谨慎使用它(即不要使用太多元素),以便保持轮询量。