JavaScript实现Etch-A-Sketch程序空格键控制功能故障排查

安全阿岳

2026-8-16

问题分析与修复方案

核心问题

你的代码存在几个关键错误，导致空格键控制失效：

键盘事件中错误创建了新的square元素，而非控制已存在的绘图方块
键盘事件的判断逻辑错误，应该用e.key或e.keyCode，而非e.keydown/e.keyup
错误地在键盘事件中添加新的事件监听，正确的做法是用flagVar标志控制原有mouseover事件的行为

修复后的代码

let flagVar = 0; // 0=允许绘图，1=禁止绘图

// 创建所有方块
for(let i = 0; i < SQUARES; i++) {
  const square = document.createElement('div')
  square.classList.add('square')
  // 根据flagVar决定是否执行setColor
  square.addEventListener('mouseover', () => {
    if(flagVar === 0) {
      setColor(square);
    }
  })
  container.appendChild(square)
}

// 空格键按下时，设置禁止绘图标志
document.body.onkeydown = function(e){
  if(e.key === ' ') {
    flagVar = 1;
    // 阻止默认滚动行为，避免页面滚动干扰操作
    e.preventDefault();
  }
}

// 空格键松开时，恢复允许绘图标志
document.body.onkeyup = function(e){
  if(e.key === ' ') {
    flagVar = 0;
  }
}

// 示例setColor函数（如果未定义需补充）
function setColor(element) {
  const randomColor = `rgb(${Math.floor(Math.random()*256)}, ${Math.floor(Math.random()*256)}, ${Math.floor(Math.random()*256)})`;
  element.style.backgroundColor = randomColor;
}