JavaScript检测元素点击：魔方HTML网站修改Div背景色方法咨询

核心方案：事件委托（Event Delegation） #

不用给54个魔方块逐个绑定点击事件，利用事件冒泡机制，只给它们的父容器绑定一次事件监听，就能处理所有子方块的点击操作，代码量少且性能更优。

代码示例 #

HTML结构

<!-- 所有魔方块统一放在父容器内 -->
<div class="cube-container">
  <div class="cube-piece"></div>
  <div class="cube-piece"></div>
  <!-- 剩余52个魔方块 -->
</div>

JavaScript实现

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取父容器
  const cubeContainer = document.querySelector('.cube-container');

  // 给父容器绑定点击事件
  cubeContainer.addEventListener('click', function(e) {
    // 确认点击的是魔方块元素
    if (e.target.classList.contains('cube-piece')) {
      // 方案1：直接修改背景色（简单直接）
      e.target.style.backgroundColor = '#ff4500';

      // 方案2：用CSS类切换（更推荐，样式与逻辑分离）
      // e.target.classList.toggle('clicked-color');
    }
  });
});

配套CSS（如果用方案2）

.clicked-color {
  background-color: #ff4500;
  /* 还可以添加点击后的其他视觉效果，比如阴影、边框 */
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

额外建议 #

• 样式与逻辑分离：优先用CSS类控制样式，后续要改颜色或效果时，只需要修改CSS，不用动JS代码。
• 灵活切换颜色：如果需要点击切换回原颜色，用classList.toggle()即可（方案2的写法）；如果需要多色切换，可以给每个方块存初始颜色，点击时判断当前颜色再切换。
• 避免错误触发：通过e.target.classList.contains('cube-piece')判断点击目标，防止父容器内其他元素触发事件。

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