Question

我在另一个div中有一个div，当用户将鼠标悬停在父节点上时，内部div跟随鼠标位置。但是，当鼠标位于父母的边缘时，孩子的边界超出了父母的范围。我想这样做，所以孩子div的边界总是被父母包围。

我对我到目前为止所做的事情做了一个小提琴：https://jsfiddle.net/0ahqoycg

我正在考虑的一个解决方案是检查内部div top属性是否与外部top的某个长度有关，如果是停止鼠标位置跟踪，同样适用于左，右和底部。

有谁能告诉我，是否有一个好方法可以让孩子的父母的边界保持在其父母身边？

Answer 1

使用.offset()，.width()和.height()进行计算允许的坐标。
在变量中缓存所有选择器并在外部预先计算因为数量相当大而提升了性能正在生成mouseover个事件。
标记为//fine tune tweaks的2个部分用于缓解最后几个部分在超越位置越过边界之前错过的事件边界限制。

var innerDiv = $('#inner');
var outerDiv = $('#outer');
var outDim = outerDiv.offset();
outDim.right = (outDim.left + outerDiv.width());
outDim.bottom = (outDim.top + outerDiv.height());
$(document).on('mousemove', function(e) {
  var x = (e.clientX) - 15;
  var y = (e.clientY) - 15;
  var x_allowed = x >= outDim.left && x <= (outDim.right - innerDiv.width());
  var y_allowed = y >= outDim.top && y <= (outDim.bottom - innerDiv.height());
  if (y_allowed) {
    innerDiv.css({
      top: y + 'px',
    });
  } else {
    //fine tune tweaks
    if (y >= outDim.top) {
      innerDiv.css({
        top: (outDim.bottom - innerDiv.height()) + 'px',
      });
    }
    if (y <= (outDim.bottom - innerDiv.height())) {
      innerDiv.css({
        top: outDim.top + 'px',
      });
    }
  }

  if (x_allowed) {
    innerDiv.css({
      left: x + 'px'
    });
  } else {
    //fine tune tweaks
    if (x >= outDim.left) {
      innerDiv.css({
        left: outDim.right - innerDiv.width() + 'px',
      });
    }
    if (x <= (outDim.right - innerDiv.width())) {
      innerDiv.css({
        left: outDim.left + 'px',
      });
    }
  }


});

#wrap {
  height: 200px;
  width: 200px;
  border: 2px solid black;
}
#outer {
  height: 100px;
  width: 100px;
  border: 2px solid blue;
  margin: 0 auto;
}
#inner {
  height: 40px;
  width: 40px;
  border: 2px solid red;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
  <div id="outer">
    <div id="inner">

    </div>
  </div>
</div>

Answer 2

有些事情......

  var innerDiv = $('#inner');
  var outerDiv = $('#outer');
  innerDivWidth = innerDiv.outerWidth();
  innerDivHeight = innerDiv.outerHeight();
  var offset = outerDiv.offset();
  var l = offset.left + 15;
  var t = offset.top + 15;
  var h = outerDiv.outerHeight();
  var w = outerDiv.outerWidth();

  var maxx = l + w - innerDivWidth;
  var maxy = t + h - innerDivHeight;


  $(document).on('mousemove', function(e) {
    if(e.clientY <= maxy && e.clientY >= t) {
    $('#inner').css({
        top: (e.clientY - 15) + 'px'
    });
    } 
    if(e.clientX  <= maxx && e.clientX  >= l) {
    $('#inner').css({
        left: (e.clientX - 15) + 'px'
    });
    }
  });

JSFiddle

要记住的一件事是，您应该在触发事件时执行代码，非常精简。特别是因为像mousemove这样的事件每秒可以被发射数百次。

摘自Jquery Doc。

请记住，每当鼠标触发mousemove事件指针移动，即使对于一个像素。这意味着数百个事件可以在很短的时间内生成。如果处理程序有做任何重要的处理，或者如果有多个处理程序事件存在，这可能会严重影响浏览器的性能。因此，重要的是优化鼠标移动处理程序可能的，并且一旦不再需要它们就解开它们。

使div保持在其父鼠标移动中

2 个答案: