如何让mousediv随鼠标点击定位且不超出wrapper容器范围？

当前代码直接基于鼠标的文档坐标设置mousediv的绝对定位，未考虑wrapper容器的边界限制，导致元素超出范围。需要通过计算容器与元素的尺寸、位置，修正定位值来解决。

方案一：wrapper未设置relative定位（基于文档坐标） #

$("#item").click(function(e) {
    // 获取wrapper容器的位置与尺寸
    const $wrapper = $('#wrapper');
    const wrapperOffset = $wrapper.offset();
    const wrapperWidth = $wrapper.width();
    const wrapperHeight = $wrapper.height();
    
    // 获取mousediv自身的宽高
    const $mouseDiv = $('#mousediv');
    const mouseDivWidth = $mouseDiv.width();
    const mouseDivHeight = $mouseDiv.height();
    
    // 初始定位（鼠标位置偏移）
    let targetTop = e.pageY - 50;
    let targetLeft = e.pageX - 10;
    
    // 修正top值，限制在wrapper上下边界内
    const minTop = wrapperOffset.top;
    const maxTop = wrapperOffset.top + wrapperHeight - mouseDivHeight;
    targetTop = Math.max(minTop, Math.min(targetTop, maxTop));
    
    // 修正left值，限制在wrapper左右边界内
    const minLeft = wrapperOffset.left;
    const maxLeft = wrapperOffset.left + wrapperWidth - mouseDivWidth;
    targetLeft = Math.max(minLeft, Math.min(targetLeft, maxLeft));
    
    // 应用定位并显示
    $mouseDiv.css({
        'top': targetTop,
        'left': targetLeft,
        'position': 'absolute'
    }).show();
});

方案二：wrapper设置relative定位（基于容器内部坐标） #

如果给wrapper添加position: relative，mousediv的absolute定位会相对于wrapper，计算逻辑更简洁：

#wrapper {
    position: relative;
}

$("#item").click(function(e) {
    const $wrapper = $('#wrapper');
    const wrapperWidth = $wrapper.width();
    const wrapperHeight = $wrapper.height();
    
    const $mouseDiv = $('#mousediv');
    const mouseDivWidth = $mouseDiv.width();
    const mouseDivHeight = $mouseDiv.height();
    
    // 基于wrapper内部的点击坐标计算初始位置
    let targetTop = e.offsetY - 50;
    let targetLeft = e.offsetX - 10;
    
    // 修正边界，确保不超出wrapper内部范围
    targetTop = Math.max(0, Math.min(targetTop, wrapperHeight - mouseDivHeight));
    targetLeft = Math.max(0, Math.min(targetLeft, wrapperWidth - mouseDivWidth));
    
    $mouseDiv.css({
        'top': targetTop,
        'left': targetLeft,
        'position': 'absolute'
    }).show();
});

关键逻辑说明 #

• 通过offset()获取容器相对于文档的位置，width()/height()获取容器与元素的尺寸
• 用Math.max()和Math.min()将定位值限制在合法区间：
  • 垂直方向：最小top为容器顶部（或0，基于relative定位），最大top为容器底部减去元素自身高度
  • 水平方向：最小left为容器左侧（或0，基于relative定位），最大left为容器右侧减去元素自身宽度

内容的提问来源于stack exchange，提问作者Rocket