如何在点击框外时移除JavaScript创建的指定类元素

问题原因 #

• 报错核心是关闭回调没有接收event参数，部分浏览器不支持全局event对象直接调用
• 每次点击属性选项都会重复绑定遮罩层的点击事件，触发多次移除逻辑
• 没有做已创建选择器的判断，导致每次点击都生成新的颜色选择器元素
• 移除元素后没有解绑对应事件、隐藏遮罩层，逻辑不闭环

优化后实现代码 #

原有CSS、HTML代码无需改动，仅替换JS代码即可：

var restyleBG = document.getElementsByClassName("restyleBackground")[0];
var optionChooseBackground = document.getElementById("optionToChooseBackground");
var optionToChoosePicker = document.getElementById("optionToChoose");
restyleBG.addEventListener('click', changeBGcolor);

function changeBGcolor() {
  optionChooseBackground.style.display = "block";
  let optionChooseTag = optionChooseBackground.getElementsByTagName("p")

  for (let j = 0; j < optionChooseTag.length; j++) {
    optionChooseTag[j].onclick = function(e) {
      // 阻止事件冒泡到遮罩层，避免刚打开就触发关闭
      e.stopPropagation();
      var varWantToChange = optionChooseTag[j].innerHTML;

      // 先移除已存在的颜色选择器，避免重复创建
      let existPicker = document.querySelector('.colour-picker');
      if(existPicker) existPicker.remove();

      let colourPicker = document.createElement("input");
      colourPicker.type = "color";
      colourPicker.className = "colour-picker";
      optionToChoosePicker.appendChild(colourPicker);
      colourPicker.click();
      
      // 颜色选择回调
      colourPicker.addEventListener('input', function() {
        var colorPickerVal = colourPicker.value;
        if (varWantToChange == "borderColor") {
          restyleBG.style.borderColor = colorPickerVal;
        } else if (varWantToChange == "backgroundColor") {
          restyleBG.style.backgroundColor = colorPickerVal;
        }
        // 选完颜色后自动移除选择器、关闭遮罩
        clearPickerAndClose();
      })

      // 统一的清理逻辑
      function clearPickerAndClose(e) {
        // 如果是点击事件，仅点击遮罩层时才执行清理
        if(e && e.target !== optionChooseBackground) return;
        colourPicker.remove();
        optionChooseBackground.style.display = "none";
        // 解绑事件避免重复绑定
        optionChooseBackground.removeEventListener('click', clearPickerAndClose);
      }

      optionChooseBackground.addEventListener('click', clearPickerAndClose)
    }
  }
}

核心优化点 #

• 提前缓存公共DOM元素，避免重复查询DOM提升性能
• 每次创建选择器前先移除已存在的同class元素，从根源避免重复生成
• 点击属性选项时阻止事件冒泡，避免刚触发创建就触发关闭逻辑
• 统一封装清理逻辑，选完颜色、点击外部两种场景复用同一套逻辑，自动解绑事件、隐藏遮罩层
• 给事件回调补充事件对象参数，解决兼容性报错问题

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