如何实现JavaScript点击事件仅触发一次，避免重复创建DOM元素？

针对你的需求，有几种简单方案可以让点击事件只触发一次，避免重复创建元素：

方案1：利用addEventListener的once参数 #

这是最简洁的方法，绑定事件时设置once: true，浏览器会自动在事件触发一次后移除监听器：

const arrow = document.querySelector("#arrow");
const callAllPie = document.querySelector(".allPie");
eventList();
function eventList(e) {
  // 添加once选项，事件仅触发一次
  arrow.addEventListener("click", showSkills, { once: true });
}
function showSkills() {
  let element = callAllPie;
  for (let i = 0, n = 4; i < n; i++) {
    const pie = document.createElement("div");
    pie.classList.add("pie1");
    callAllPie.appendChild(pie);
    const rightDiv = document.createElement("div");
    rightDiv.classList.add("slice-right1");
    const leftDiv = document.createElement("div");
    leftDiv.classList.add("slice-left1");
    const percentDiv = document.createElement("div");
    percentDiv.classList.add("percent1");
    const numberDiv = document.createElement("div");
    numberDiv.classList.add("number1");
    numberDiv.innerHTML = "%99";
    const nameDiv = document.createElement("div");
    nameDiv.classList.add("name1");
    nameDiv.innerHTML = "HTML";
    pie.appendChild(rightDiv);
    pie.appendChild(leftDiv);
    pie.appendChild(percentDiv);
    percentDiv.appendChild(numberDiv);
    percentDiv.appendChild(nameDiv);
    // 注意：原代码里重复调用了appendChild(pie)，此处已删除重复行
  }
}

方案2：执行后手动移除事件监听 #

在showSkills函数执行完毕后，主动移除绑定的点击事件：

const arrow = document.querySelector("#arrow");
const callAllPie = document.querySelector(".allPie");
eventList();
function eventList(e) {
  arrow.addEventListener("click", showSkills);
}
function showSkills() {
  let element = callAllPie;
  for (let i = 0, n = 4; i < n; i++) {
    // 原有的元素创建代码...
    // 删除重复的appendChild(pie)
  }
  // 执行完后移除事件监听
  arrow.removeEventListener("click", showSkills);
}

方案3：添加状态标记控制 #

通过变量标记是否已经执行过创建逻辑，点击时先判断状态：

const arrow = document.querySelector("#arrow");
const callAllPie = document.querySelector(".allPie");
// 初始化状态标记
let hasCreatedSkills = false;
eventList();
function eventList(e) {
  arrow.addEventListener("click", showSkills);
}
function showSkills() {
  // 如果已经创建过，直接退出函数
  if (hasCreatedSkills) return;
  // 标记为已创建
  hasCreatedSkills = true;
  
  let element = callAllPie;
  for (let i = 0, n = 4; i < n; i++) {
    // 原有的元素创建代码...
    // 删除重复的appendChild(pie)
  }
}

额外提醒：你原代码的循环里重复调用了callAllPie.appendChild(pie)，这会导致每个pie元素被添加两次，记得删掉其中一次。

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