你如何监听在JavaScript中移动的HTML元素？

我有一个HTML元素，我需要跟踪另一个元素。 具体来说，我需要让两个元素的左上角和右上角定位相同。 调整窗口大小时，会触发resize事件，我可以调整依赖元素的位置。 但是，如果被跟踪的元素被重新定位（但没有resize），我看不到任何DOM事件。

我们怎样才能知道DOM元素是否被移动了？ 我们正在使用最新的jQuery。

这是一个代码示例。

请注意， elementOne和mouseTracking div用于显示因某些原因而移动的元素，这些因素超出了我的代码控制范围。

1. 此代码适用于elementOne案例。
2. MouseTrackingTracker不跟踪移动元素。
3. ResizerTracker不会在溢出的情况下在完整文本周围放置边框。

我希望trackingDivs移动和resize，无论跟踪元素的变化原因是什么。

此代码依赖于窗口大小调整是钩子事件。 当元素改变其尺寸时触发一些触发的事件更接近我的需要。

        #elementOne { float : right;width : 200px; display:inline-block} #resizer { float : left; display:inline-block} .trackedDiv { width:50px; height:50px; background-color: blue } .trackingDiv { position:absolute; z-index: 1; border:3px green; border-style: solid;}   $(function() { $( window ).bind("resize",function(){ $("#elementOne").trigger("reposition"); $("#mouseTracking").trigger("reposition"); $("#resizer").trigger("reposition"); }); var repositionFunction = function(selfish, element){ var self = $(selfish); var offset = self.offset(); var selfTop = offset.top; var selfLeft = offset.left; var selfWidth = self.width(); var selfHeight = self.height(); $(element).css({ top: selfTop, left: selfLeft, width : selfWidth, height : selfHeight }); } $(document).mousemove(function(ev){ $("#mouseTracking").position({ my: "left bottom", of: ev, offset: "3 -3", collision: "fit" }); }); var timedShort = function() { $('#resizer').html("Really short").resize(); setTimeout(timedLong, 10000); } var timedLong = function() { $('#resizer').html("Really longggggggggggggggggggggggggggggggggggggggggggggggggggg text").resize(); setTimeout(timedShort, 10000); } setTimeout(timedLong, 10000); $("#elementOne").bind("reposition", function() { repositionFunction(this, "#elementOneTracker"); }); $("#mouseTracking").bind("reposition", function() { repositionFunction(this, "#mouseTrackingTracker"); }); $("#resizer").bind("reposition", function() { repositionFunction(this, "#resizerTracker"); }); });    
tracks mouse
 
 
 
resizer: resizes
 
 
elementOne: floats to the right
 
   

Answer 1

无论何时重新定位元素，都可以使用jquery触发自定义事件。

 $( window ).bind("resize",function(){ $("#elementOne").css({ top: 200, left: 200 }).trigger("reposition"); }); // and now you can listen to a "reposition event" $("#elementOne").bind("reposition",function(){ var self = $(this); $("#elementTwo").css({ top: self.css("top"), left: self.css("left") }); }); 

因此，您可以使用一些手动编码自己提供事件挂钩，这很有用，因为在所有浏览器中都不完全支持像DOMAttrModified这样的酷事件。 缺点是，你必须自己做。

Answer 2

不幸的是，当元素移动或resize时，没有可靠的事件可以告诉您。 您可以使用轮询元素，但这不一定是最高性能的解决方案：

 setInterval(repositionElement, 10); 

另一个选择是让你的元素纯粹通过CSS“跟踪”另一个元素。 为此，您需要围绕要跟踪的元素的“包装器”，以及另一个元素：

 #wrapper-around-element-to-track { position: relative; } #tracked-element { position: absolute; /* set top and left to position, if necessary */ } #tracking-element { position: absolute; /* set top and left to position, if necessary */ } 

既然你已经在使用jQuery了，你也可以使用resize事件插件来模拟任何元素上的resize事件，但如果我记得上次看到它时，它只是像我提到的那样进行轮询。

Answer 3

有DOMAttrModified事件，但它只在Firefox和Chrome中实现 。 但是，当您需要一个JavaScript函数来启动元素移动时，您可以在此处使用Jquery触发自定义事件 。