如何通过按键重置鼠标悬停后改变的 div 背景颜色

本文介绍一种基于事件委托与状态跟踪的解决方案：为所有 `.colorcell` 元素绑定 `mouseover` 事件以随机设色，并在全局监听 `keydown`，仅当有元素处于悬停状态时重置其背景色。

要实现“鼠标悬停变色 + 按键一键重置”的交互效果，关键在于分离事件逻辑与维护当前状态。原始代码存在两个核心问题：

1. onkeydown 无法在 上直接触发（div 默认不可聚焦，不响应键盘事件）；
2. element.backgroundColor 写法错误——应使用 element.backgroundColor 的赋值对象是 HTMLElement.style，但原始 HTML 中 onkeydown="resetColor(this.style)" 的 this 指向的是 DOM 元素本身，而非其 style 对象，且 div 缺少 tabindex 导致无法获得焦点。

✅ 正确做法是：

• 移除内联事件（onmouseover/onkeydown），改用现代事件监听器；
• 使用 document.addEventListener('keydown', ...) 全局监听按键；
• 用一个变量（如 elementHovered）暂存当前被悬停元素的 style 对象，确保 keydown 时能精准操作目标样式；
• 将颜色生成逻辑封装为纯函数，提升可读性与复用性。

以下是完整、可运行的实现方案：

let elementHovered = null;

function getRandomColor() {
  return Math.floor(Math.random() * 256);
}

function randomColor(style) {
  const r = getRandomColor();
  const g = getRandomColor();
  const b = getRandomColor();
  style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
}

function resetColor(style) {
  style.backgroundColor = '#ffff99';
}

// 为每个 .colorCell 绑定 mouseover 事件
document.querySelectorAll('.colorCell').forEach(cell => {
  cell.addEventListener('mouseover', () => {
    elementHovered = cell.style; // ✅ 直接保存 style 引用
    randomColor(elementHovered);
  });
});

// 全局监听任意按键（可选：限定为 'Escape' 或 'r' 键增强体验）
document.addEventListener('keydown', (e) => {
  if (elementHovered) {
    resetColor(elementHovered);
    elementHovered = null; // 重置状态，避免重复操作
  }
});

对应 HTML 无需 onmouseover 或 onkeydown 属性，简洁清晰：

? 注意事项：

• 若需支持键盘精确控制（例如仅按 R 键重置），可在 keydown 回调中判断 e.key.toLowerCase() === 'r'；
• 当前逻辑是“最后一次悬停的元素”被重置；如需重置所有已变色元素，可改用 Set 存储所有已着色元素的 style，并在 keydown 时遍历重置；
• CSS 中 background-color: #ffff99 作为初始态，确保样式可被 JS 可靠覆盖；
• 不推荐使用 element.style.backgroundColor = '' 清空——这会回退到 CSS 规则或继承值，而非明确恢复初始色，显式赋值更可控。

该方案兼顾语义化、可维护性与用户体验，是处理动态样式+快捷重置场景的标准实践。