点击div通过select改背景时多个div事件监听互相影响问题

问题根因 #

你每次点击div都会调用changeColor给全局唯一的select元素新增一个change事件监听，历史绑定的监听不会自动清除。当你选中下拉框颜色触发change事件时，所有之前绑定的监听函数都会执行，对应修改所有你之前点击过的div的背景色，就出现了互相影响的问题。

修复代码 #

我们只需给select绑定一次change事件，用变量存储当前需要修改背景色的目标div即可，不需要每次点击div重复绑定事件：

修改后的JS代码 #

const divs = document.querySelectorAll('div.two, div.three');
const select = document.querySelector('select');
// 存储当前激活的目标div
let currentTargetDiv = null;

// 全局仅绑定一次select的change事件
select.addEventListener('change', (e) => {
  if (currentTargetDiv) {
    currentTargetDiv.style.backgroundColor = select.value;
  }
  select.classList.add('hidden');
  currentTargetDiv = null;
  e.stopPropagation();
});

divs.forEach(div => {
  div.addEventListener('click', (e) => {
    // 点击div时仅更新目标、显示下拉框
    currentTargetDiv = div;
    select.classList.remove('hidden');
    e.stopPropagation();
  });
});

你原有的HTML和CSS代码不需要做任何调整即可正常运行。

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