如何使用color-picker动态修改被点击元素的颜色

我需要根据用户偏好动态修改元素颜色：用户选中颜色后可同步应用到目标元素上。

具体效果为：点击元素后唤起color-picker，功能类似开发者工具的取色器，选中颜色后立即应用到被点击的元素，且支持在同一个取色器中反复调整颜色并同步生效

我已参考相关技术讨论但未找到适配的解决方案。

我希望代码实现如下效果：下方代码片段中，任意元素被点击时，修改的是该被点击元素的颜色。

原始代码的HTML结构如下，可通过事件冒泡/捕获实现需求：
<div id="clockOuterCircle"><div id="clockStyleCircle"></div></div>

现有代码片段 #

HTML #

<div id="clockStyleCircle"></div>
<div id="clockOuterCircle"></div>
<div id="demo"></div>
<input type="color" name="colorClock" id="colorClock">

CSS #

#clockStyleCircle {
  position: absolute;
  width: 16vw;
  height: 16vw;
  text-align: center;
  padding: 0%;
  top: 28.5%;
  left: 28.5%;
  border-radius: 50%;
  border: 3px solid black;
  background-color: rgb(255, 233, 35);
}

#clockOuterCircle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42vw;
  height: 42vw;
  margin: auto;
  border-radius: 50%;
  border: 4px solid rgb(255, 62, 62);
  background-color: rgb(253, 133, 133);
  user-select: none;
}

JS（初始版本） #

var reed = document.getElementById("clockOuterCircle");
var reed1 = document.getElementById("clockStyleCircle");
reed.addEventListener('click', deed)
reed1.addEventListener('click', deed)

function deed() {
  var reed2 = document.getElementById("colorClock");
  reed2.click();
  var reed3 = reed2.value;
  // reed1.addEventListener('change', function() {
  this.style.backgroundColor = reed3;
  document.getElementById("demo").innerHTML = reed3;
  //})
}

目前我找到的动态改色方案如下，思路是为每个元素单独绑定input事件：

JS（现有优化版本） #

var reed = document.getElementById("clockOuterCircle");
var reed1 = document.getElementById("clockStyleCircle");
reed.addEventListener('click', deed)
reed1.addEventListener('click', deed)

reed2 = document.getElementById("colorClock");
reed2.addEventListener('input', deed)

function deed() {
  var reed3 = reed2.value;
  reed.style.backgroundColor = reed3;
}

reed4 = document.getElementById("colorClock2");
reed4.addEventListener('input', deed1)

function deed1() {
  var reed5 = reed4.value;
  reed1.style.backgroundColor = reed5;
}

对应的HTML新增了第二个取色器：

<input type="color" name="colorClock" id="colorClock2">

但上述方案的问题是：无法修改被点击元素的颜色，只能修改预先指定的固定元素颜色，需要为每个元素单独编写代码，由于元素数量多，我希望实现点击任意元素即可修改其颜色的通用方案

提前感谢各位的帮助。

实现核心是用一个全局变量记录当前被点击的目标元素，仅需要1个全局取色器即可适配任意数量元素的改色需求，新增元素无需额外绑定事件。

完整可运行代码 #

HTML #

<div id="clockStyleCircle"></div>
<div id="clockOuterCircle"></div>
<div id="demo"></div>
<input type="color" name="colorClock" id="colorClock" style="display:none">

CSS 保持原有逻辑不变 #

#clockStyleCircle {
  position: absolute;
  width: 16vw;
  height: 16vw;
  text-align: center;
  padding: 0%;
  top: 28.5%;
  left: 28.5%;
  border-radius: 50%;
  border: 3px solid black;
  background-color: rgb(255, 233, 35);
}

#clockOuterCircle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42vw;
  height: 42vw;
  margin: auto;
  border-radius: 50%;
  border: 4px solid rgb(255, 62, 62);
  background-color: rgb(253, 133, 133);
  user-select: none;
}

JS #

// 记录当前待改色的目标元素
let activeColorTarget = null
const colorPicker = document.getElementById('colorClock')
const demoEl = document.getElementById('demo')

// 全局事件委托，所有元素点击都触发改色逻辑，新增元素无需额外绑定
document.addEventListener('click', e => {
  // 可在此处添加过滤规则，排除不需要改色的元素
  const excludeTags = ['INPUT', 'DIV#demo']
  if (excludeTags.some(tag => e.target.matches(tag))) return
  // 记录当前点击的元素
  activeColorTarget = e.target
  // 唤起取色器
  colorPicker.click()
})

// 监听取色器数值变化，实时同步到目标元素
colorPicker.addEventListener('input', () => {
  if (!activeColorTarget) return
  const selectedColor = colorPicker.value
  activeColorTarget.style.backgroundColor = selectedColor
  demoEl.innerText = selectedColor
})

逻辑说明 #

• 仅使用1个隐藏的全局取色器，不需要为每个元素单独配置取色器
• 采用事件委托绑定点击事件，后续新增的元素自动支持改色功能，无需额外编写绑定代码
• 取色器input事件实时响应颜色调整，拖动取色器时即可同步看到元素颜色变化，不需要确认选择

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