onclick事件获取x/y坐标错误，点击生成的方块位置偏移如何修复

核心问题梳理 #

• 生成方块的方法未接收传入的容器参数，默认插入到了body节点，而非红色边框容器
• 容器未设置相对定位作为子元素定位参照，方块使用静态定位+边距控制位置逻辑错误
• 点击坐标使用的是整个视口的绝对坐标，未换算为相对于容器内部的相对坐标

具体修改步骤 #

1. 修改CSS样式 #

找到对应样式块做如下调整：

#plants {
    width: 100vw;
    height: 75vh;
    border: 10px solid #FF5555;
    /* 新增相对定位作为子元素定位参照 */
    position: relative;
    /* 新增盒模型规则，让边框算在容器宽高内 */
    box-sizing: border-box;
    /* 移除原有flex相关样式，不需要流式布局 */
    /* display: flex;
    flex-wrap: wrap; */
}

.plant {
    /* 改为绝对定位，自由控制位置 */
    position: absolute;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

2. 修改JS逻辑 #

第一步：修复点击坐标计算和参数传递

修改容器点击事件和generatePlant方法：

plantsContainer.addEventListener('mousedown', function(event) {
    // 计算相对于容器内部的坐标，减去容器自身的偏移量
    const rect = plantsContainer.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    generatePlant(x, y, plantsContainer);
});

function generatePlant(x, y, appendAt) {
    let plant = new Plant();
    
    x = x ?? Math.floor(Math.random() * window.innerWidth);
    y = y ?? Math.floor(Math.random() * window.innerHeight);
    
    // 修复：把appendAt参数传给生成元素的方法
    generatePlantElement(plant, x, y, appendAt);
    
    console.log(x, y);
    
    return plant;
}

第二步：修改方块位置赋值逻辑

修改generatePlantElement方法里的位置设置：

function generatePlantElement(plant, x, y, appendAt) {
    let plantElement = document.createElement("div");
    let plantState = plant.getState();
    
    plantElement.classList.add("plant");
    
    // 把marginLeft/marginTop改为left/top
    plantElement.style.left = `${x}px`;
    plantElement.style.top = `${y}px`;
    
    plantElement.style.backgroundColor = plantState.color;
    
    (appendAt || document.body).appendChild(plantElement);
    
    // 新增阻止点击冒泡，避免点击方块时又生成新方块
    plantElement.onclick = (e) => {
        e.stopPropagation();
        changeColorOnClick(plant, plantElement);
    };
}

以上修改完成后即可实现点击容器任意位置生成对应位置的方块，点击方块切换颜色的需求。

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