为何调用deleteItem函数需点击两次？请求技术协助

核心问题 #

你的代码存在重复绑定点击事件的问题：

• HTML中给.deleteItem元素添加了onclick="deleteItem()"，点击时会先执行这个函数。
• 而deleteItem()函数内部又会给所有.deleteItem元素添加click事件监听。

第一次点击时，实际只执行了deleteItem()函数（给元素挂上监听），并没有触发删除逻辑；第二次点击才会触发刚挂上的click监听，执行删除操作，所以需要点击两次。

解决方案1：移除HTML中的onclick属性（推荐） #

这种方式更符合现代事件绑定的最佳实践，避免重复绑定。

修改后的HTML：

<div class="cart__item__content__settings__delete">
  <p class="deleteItem" dataid="${id}" datacolor="${color}">Supprimer</p>
</div>

JS代码保持不变：

function deleteItem() {
  let products = document.querySelectorAll(".deleteItem");
  for (let product of products) {
    product.addEventListener("click", (e) => {
      let id = e.target.getAttribute("dataid");
      let color = e.target.getAttribute("datacolor");
      let deleteItem = basket.find(
        (element) => element.id == id && element.color == color
      );
      console.log(deleteItem);
      basket = basket.filter((item) => item != deleteItem);
      localStorage.setItem("basket", JSON.stringify(basket));
      window.location.href = "cart.html";
    });
  }
}
deleteItem();

页面加载时deleteItem()会执行一次，给所有删除按钮绑定好点击事件，之后点击一次就能触发删除逻辑。

解决方案2：修改deleteItem函数，直接处理当前点击元素 #

如果需要保留HTML中的onclick，可以修改函数逻辑，直接处理触发点击的元素，不用再循环添加监听：

修改后的JS代码：

function deleteItem(e) {
  // 直接从触发事件的元素获取数据
  let id = e.target.getAttribute("dataid");
  let color = e.target.getAttribute("datacolor");
  let deleteItem = basket.find(
    (element) => element.id == id && element.color == color
  );
  console.log(deleteItem);
  basket = basket.filter((item) => item != deleteItem);
  localStorage.setItem("basket", JSON.stringify(basket));
  window.location.href = "cart.html";
}

HTML保持不变：

<div class="cart__item__content__settings__delete">
  <p class="deleteItem" onclick="deleteItem(event)" dataid="${id}" datacolor="${color}">Supprimer</p>
</div>

注意这里onclick要传递event参数，让函数能获取到触发点击的元素。

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