为什么使用input颜色选择器第二次改色时函数会作用到其他元素？

问题根因 #

你代码的核心问题是：每次点击圆形元素时，都会给同一个全局颜色选择器#colorClock新增一个input事件监听，且旧的监听不会被移除。当你第二次点击其他元素调整颜色时，会同时触发前几次绑定的所有监听函数，对应多个不同的元素，因此会出现多个元素颜色同步变化的问题。

修复方案 #

无需动态创建销毁颜色选择器，只需要新增一个变量存储当前选中的待修改元素，全局仅给颜色选择器绑定一次监听事件即可，修复后的JS代码如下：

// 存储当前选中的待修改颜色的元素
let activeEditElement = null;
const colorPicker = document.getElementById("colorClock");
const restyleBG = document.getElementsByClassName("restyleBackground");

// 全局仅绑定一次颜色选择器的输入监听
colorPicker.addEventListener('input', function() {
  // 仅当存在选中元素时更新样式
  if (activeEditElement) {
    activeEditElement.style.backgroundColor = colorPicker.value;
  }
})

for (let i = 0; i < restyleBG.length; i++) {
  restyleBG[i].addEventListener('click', changeBGcolor)

  function changeBGcolor(event) {
    event.stopPropagation()
    // 点击元素时更新当前选中的编辑对象
    activeEditElement = this;
    colorPicker.click();
  }
}

该方案完全基于原生input颜色选择器实现，点击任意元素后仅会修改当前选中元素的背景色，不会影响其他元素。如果后续需要扩展修改border等其他属性，只需要新增变量存储当前要修改的属性名，在监听函数中对应修改即可。

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