Question

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

我们如何确定DOM元素是否已被移动？我们正在使用最新的jQuery。

这是一个代码示例。

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

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

我希望trackingDivs能够移动和调整大小，无论被跟踪元素的变化原因是什么。

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

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>
  <style type="text/css">
#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;}
</style>
<script>
  $(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"); });
  });
  </script>
</head>
<body>
  <div class="trackedDiv" id="mouseTracking">tracks mouse</div>
  <div class="trackingDiv" id="mouseTrackingTracker"></div>
  <div style="clear:both;"></div>
  <div class="trackedDiv" id="resizer">resizer: resizes</div>
  <div class="trackingDiv" id="resizerTracker"></div>
  <div class="trackedDiv" id="elementOne">elementOne: floats to the right</div>
  <div class="trackingDiv" id="elementOneTracker"></div>
</body>
</html>

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

不幸的是，在元素移动或调整大小时，没有可靠的事件可以告诉您。您可以使用 polling 元素，但这不一定是最高性能的解决方案：

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 event plugin来模拟任何元素上的resize事件，但如果我记得上次看到它时，它只是像我提到的那样进行轮询

Answer 3

有DOMAttrModified事件，但它只在Firefox and Chrome中实现。但是，当您需要一个JavaScript函数来启动元素移动时，您可以在此处触发custom event with Jquery。

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

3 个答案: