JavaScript按钮点击监听异常：首次点击即触发元素移除求助

你的代码核心问题是给每个按钮同时绑定了两个点击事件——第一次点击按钮时，saveFavourites和removeFavourites会被同时触发，刚把产品加入数组就立刻被移除，所以看起来像是没添加成功。另外全局的click变量是所有按钮共用的，多个按钮点击会互相干扰，逻辑完全混乱。

修复后的代码 #

let favorites = []
let buttonList = document.querySelectorAll("button")

buttonList.forEach((button, index) => {
  button.addEventListener('click', function() {
    const targetProduct = products[index];
    // 检查当前产品是否已在收藏列表中
    const isInFavorites = favorites.includes(targetProduct);

    if (isInFavorites) {
      // 移除收藏：找到索引并删除
      const productIndex = favorites.indexOf(targetProduct);
      favorites.splice(productIndex, 1);
      button.textContent = "+";
    } else {
      // 添加收藏：推入数组并切换按钮文本
      favorites.push(targetProduct);
      button.textContent = "-";
    }
    console.log(favorites);
  });
});

关键改进点 #

• 每个按钮只绑定单个点击事件，在事件内部通过判断当前状态执行添加/移除逻辑，避免两个事件同时触发的问题
• 去掉全局click变量，改用产品是否在数组中作为判断依据，逻辑更清晰且不会跨按钮干扰
• 每次点击先获取对应产品，再执行对应操作，逻辑闭环更稳定

额外优化（针对对象数组） #

如果products是对象数组（每个元素是带唯一标识的对象），includes和indexOf会因为引用类型判断失效，这时候可以用findIndex根据唯一ID判断：

let favorites = []
let buttonList = document.querySelectorAll("button")

buttonList.forEach((button, index) => {
  button.addEventListener('click', function() {
    const targetProduct = products[index];
    // 根据产品唯一ID查找是否已收藏
    const existingIndex = favorites.findIndex(item => item.id === targetProduct.id);

    if (existingIndex !== -1) {
      favorites.splice(existingIndex, 1);
      button.textContent = "+";
    } else {
      favorites.push(targetProduct);
      button.textContent = "-";
    }
    console.log(favorites);
  });
});

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