移除购物车商品时确认弹窗异常问题

云上老周

2026-8-22

问题分析与解决

你的问题出在两个核心点上：

多余的e.target判断逻辑：如果删除按钮内部包含子元素（比如图标、文字节点），点击时e.target会指向子元素而非按钮本身，此时子元素没有data-product_id属性，判断条件不成立，直接跳过确认弹窗执行删除操作。单个商品时你大概率点中按钮本体，所以功能正常；多个商品时容易误点到子元素，就出现了直接删除的异常。
循环绑定的逻辑冗余：你已经通过循环给每个按钮单独绑定了事件，完全没必要再判断当前点击目标和按钮的product_id是否一致。

修复后的代码方案一（简化现有逻辑）

直接去掉多余判断，在点击事件里直接弹出确认框，确保逻辑简洁可靠：

const productsButtons = document.querySelectorAll(".remove");

function removeProductButton() {
  for (let i = 0; i < productsButtons.length; i++) {
    productsButtons[i].addEventListener("click", (e) => {
      if (!confirm("你确定要删除这个商品吗？")) {
        e.preventDefault();
        e.stopPropagation();
      }
    });
  }
}

removeProductButton();

更优方案（事件委托）

如果你的购物车商品是动态添加/删除的，推荐用事件委托绑定在父容器上，这样无需每次DOM更新后重新绑定事件，代码更健壮：

// 替换成你实际的购物车父容器选择器，比如.cart-list
document.querySelector(".cart-list").addEventListener("click", (e) => {
  // 确认点击的是删除按钮（包括按钮内部子元素的情况）
  const removeBtn = e.target.closest(".remove");
  if (removeBtn) {
    if (!confirm("你确定要删除这个商品吗？")) {
      e.preventDefault();
      e.stopPropagation();
    }
  }
});