如何用方向键在父div内移动子div？JavaScript新手求助

嘿，作为JS新手碰到这种元素移动的问题太正常啦！我帮你梳理下问题并给出完整的可运行方案，咱们一步步来～

首先，先把你给出的HTML和CSS补全，确保基础样式没问题：

<div id="rectangle">
  <div id="square"></div>
</div>

#rectangle {
  width: 320px;
  height: 200px;
  border: 1px solid #333;
  margin: 20px auto;
  position: relative;
  background-color: #f5f5f5;
}

#square {
  width: 40px;
  height: 40px;
  background-color: deepskyblue;
  position: absolute;
  left: 0;
  top: 0; /* 补充top初始值，不然默认是auto，位置会有问题 */
  transition: all 0.1s; /* 加个过渡动画，移动更丝滑 */
}

接下来是核心的JavaScript代码，我会详细解释每个部分：

// 等DOM加载完成再执行代码，避免获取不到元素
document.addEventListener('DOMContentLoaded', function() {
  // 获取父容器和小方块元素
  const rectangle = document.getElementById('rectangle');
  const square = document.getElementById('square');
  
  // 设置每次移动的步长（像素）
  const step = 10;
  
  // 监听键盘按下事件
  document.addEventListener('keydown', function(e) {
    // 获取小方块当前的位置（转换为数字，去掉px单位）
    let currentLeft = parseInt(window.getComputedStyle(square).left);
    let currentTop = parseInt(window.getComputedStyle(square).top);
    
    // 获取父容器的尺寸，用于判断边界
    const rectWidth = rectangle.offsetWidth;
    const rectHeight = rectangle.offsetHeight;
    const squareWidth = square.offsetWidth;
    const squareHeight = square.offsetHeight;
    
    // 根据方向键更新位置，同时检查边界，避免移出父容器
    switch(e.key) {
      case 'ArrowLeft':
        // 左边界不能小于0
        currentLeft = Math.max(0, currentLeft - step);
        break;
      case 'ArrowRight':
        // 右边界不能超过父容器宽度 - 方块宽度
        currentLeft = Math.min(rectWidth - squareWidth, currentLeft + step);
        break;
      case 'ArrowUp':
        // 上边界不能小于0
        currentTop = Math.max(0, currentTop - step);
        break;
      case 'ArrowDown':
        // 下边界不能超过父容器高度 - 方块高度
        currentTop = Math.min(rectHeight - squareHeight, currentTop + step);
        break;
      default:
        // 不是方向键就不处理
        return;
    }
    
    // 把更新后的位置设置给小方块
    square.style.left = `${currentLeft}px`;
    square.style.top = `${currentTop}px`;
    
    // 阻止默认行为，比如页面滚动
    e.preventDefault();
  });
});

关键知识点解释： #

• DOM加载时机：用DOMContentLoaded确保页面元素都加载完成后再获取DOM，不然可能拿不到#square或#rectangle元素，这是新手常踩的坑！
• 键盘事件选择：用keydown而不是keypress，因为keypress对方向键、功能键这类特殊按键不生效。
• 边界检查：每次移动前计算最大/最小可移动位置，确保方块不会移出父容器，比如右移时不能让方块的右边超出父容器的右边，所以用父容器宽度 - 方块宽度作为右边界最大值。
• 位置数值转换：getComputedStyle返回的是带px的字符串，所以要用parseInt转成数字才能做加减运算。
• 阻止默认行为：调用e.preventDefault()可以避免按方向键时页面跟着滚动，提升体验。

现在把这些代码放到一起，就能正常用方向键控制小方块在父容器内移动啦～

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