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

我在另一个div中有一个div，当用户将鼠标悬停在父div上时，内部div跟随鼠标位置。但是，当鼠标位于父对象的边缘时，子对象的边界将超出父对象。我想让child div的边界始终包含在其父级中

到目前为止，我做了一把小提琴：

我正在考虑的一个解决方案是检查内部div的

top

属性是否与外部div的

top

属性相距一定长度，如果是，则停止鼠标位置跟踪，左、右和下三个属性也是如此

有谁能告诉我，有没有一个好办法可以把孩子的边界限制在父母的范围内？

• 使用

  .offset（）

  、

  宽度（）

  和

  高度（）

  计算 允许的坐标
• 缓存变量中的所有选择器，并在外部预计算尽可能多的选择器 因为有相当多的

  mouseover

  正在生成的事件
• 标记为

  //微调调整

  的两个部分用于减少最后几个部分 越过骑行位置越过边界前错过的事件 边界限制

var innerDiv=$（'#inner'）；
var outerDiv=$（“#outer”）；
var outDim=outerDiv.offset（）；
outDim.right=（outDim.left+outerDiv.width（））；
outDim.bottom=（outDim.top+outerDiv.height（））；
$（文档）.on（'mousemove'，函数（e）{
var x=（e.clientX）-15；
变量y=（e.clientY）-15；
变量x_allowed=x>=outDim.left&&x=outDim.top&&y=outDim.top）{
innerDiv.css({
顶部：（outDim.bottom-innerDiv.height（））+px，
});
}
如果（y=向外偏左）{
innerDiv.css({
左：outDim.right-innerDiv.width（）+'px'，
});
}
如果（x沿着…的线的某物

  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'
    });
    }
  });

var innerDiv=$（'#inner'）；
var outerDiv=$（“#outer”）；
innerDivWidth=innerDiv.outerWidth（）；
innerDivHeight=innerDiv.outerHeight（）；
var offset=outerDiv.offset（）；
var l=偏移量。左+15；
var t=偏移量。顶部+15；
var h=outerDiv.outerHeight（）；
var w=outerDiv.outerWidth（）；
var maxx=l+w-宽度；
var maxy=t+h-内部高度；
$（文档）.on（'mousemove'，函数（e）{
if（e.clientY=t）{
$（“#内部”）.css({
顶部：（e.clientY-15）+“px”
});
} 
如果（e.clientX=l）{
$（“#内部”）.css({
左：（e.clientX-15）+“px”
});
}
});


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

摘自

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

你可能喜欢这个库：你的内部不是子外部，因为你使用另一个流的原因位置：绝对。你想要什么信息放置到内部？@AndreyFedorov那是什么？因为这样工作位置绝对如果你想使用图片与内部，你可以使用css光标：url（“”）@MarksCode贪婪的，嗯：D，当你快速移动时会出现故障。慢慢移动它会工作的。！！：D但是，是的，我会尝试优化。但是如果它解决了问题，接受它。顺便说一句，我会不断更新代码。我有点迷恋它。这就是我刚才说的我正在编辑的。只是使x和y独立并缓存事件外的所有变量。现在检查.更快更平滑。那更好。我喜欢它的平滑度。在内部盒子周围移动时会出现一个小错误，有时无法一直移动到边缘，但总体来说这真的很好。不知道是谁投了反对票：（@MarksCode我正在修复，1min@MarksCode修复所有问题，告诉我您是否发现了更多错误！！如果您的查询允许内部div仍然移动并被包含，即使鼠标靠近外部div的边缘？此解决方案有效。