多次点击启动按钮后Link索引事件重复触发问题求助

你的问题核心是每次调用handleSelection时，都会给每个链接新增一个点击事件监听器，多次点击启动按钮后，同一个链接会绑定多个监听器，点击时自然会多次触发。下面提供几种可行的解决方式：

方法一：先移除旧监听器，再添加新监听器 #

要实现这个方案，需要保证移除和添加的是同一个函数引用，所以把getIndex函数提取到外部：

// 提取getIndex到外部，确保每次引用的是同一个函数
function getIndex(e) {
  e.preventDefault();
  // 获取当前点击链接的索引
  const links = document.querySelectorAll(".game-list-items");
  const index = Array.from(links).indexOf(this);
  console.log("选中的链接索引:", index);
}

function handleSelection() {
  const links = document.querySelectorAll(".game-list-items");
  
  links.forEach(link => {
    // 先移除已存在的监听器，再添加新的
    link.removeEventListener("click", getIndex);
    link.addEventListener("click", getIndex);
  });
}

方法二：使用事件委托（更高效） #

不需要给每个链接单独绑定监听器，而是把监听器绑定到它们的父元素上，通过事件冒泡来处理点击。这种方式不仅避免重复绑定，还能兼容动态新增的链接：

function handleParentClick(e) {
  const target = e.target;
  // 确认点击的是目标链接
  if (target.classList.contains("game-list-items")) {
    e.preventDefault();
    const links = document.querySelectorAll(".game-list-items");
    const index = Array.from(links).indexOf(target);
    console.log("选中的链接索引:", index);
  }
}

function handleSelection() {
  // 替换成你实际的列表父元素选择器
  const listParent = document.querySelector(".game-list");
  // 先移除旧监听器，再添加新的
  listParent.removeEventListener("click", handleParentClick);
  listParent.addEventListener("click", handleParentClick);
}

方法三：使用once选项（适合单次点击场景） #

如果需求是每次启动后，每个链接只能被点击一次，可以利用addEventListener的once配置项，监听器触发一次后会自动移除：

function handleSelection() {
  const links = document.querySelectorAll(".game-list-items");
  
  links.forEach(link => {
    function getIndex(e) {
      e.preventDefault();
      const index = Array.from(links).indexOf(this);
      console.log("选中的链接索引:", index);
    }
    // 先移除旧监听器，再添加带once的新监听器
    link.removeEventListener("click", getIndex);
    link.addEventListener("click", getIndex, { once: true });
  });
}

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