点击确认弹窗后怎么阻止删除操作执行？

一忠娟提问于 2026-02-11 22:54:25 阅读 17

交互

我在做一个删除功能时遇到问题，给删除按钮绑定了点击事件，用了confirm弹窗确认，但不管点确定还是取消都会执行删除操作。我明明写了if判断，这是哪里出错了？

代码是这样的：


document.querySelector('.delete-btn').addEventListener('click', function(e) {
  e.preventDefault();
  const confirmDelete = confirm('确定删除吗？');
  if(confirmDelete) {
    // 发送删除请求
    fetch('/api/delete', {method: 'DELETE'});
  }
});

奇怪的是，就算点取消按钮，后端还是收到了删除请求。我是不是漏掉了什么关键步骤？难道不是只有确定才会执行fetch吗？

我来解答赞 2 收藏

反馈

1 条解答

Good“子墨 Lv1

你这个代码逻辑其实没问题，confirm取消时不会进if里面，fetch也不会执行。问题大概率出在按钮本身是表单提交按钮或者有其他事件冒泡触发了默认行为。

直接用 preventDefault 是对的，但得确保整个流程都阻断了。你可以试试把删除按钮的类型明确设成 button，防止误提交：

<button type="button" class="delete-btn">删除</button>

如果已经是 button 类型，那就检查下有没有多个事件监听或者父级元素也在发请求。还有一个稳妥写法是在 confirm 前加个 return 判断，虽然这里不影响逻辑，但能更清楚地看出控制流：

document.querySelector('.delete-btn').addEventListener('click', function(e) {

  e.preventDefault();

  e.stopPropagation(); // 阻止冒泡，防多层事件



  const confirmDelete = confirm('确定删除吗？');

  if (confirmDelete) {

    fetch('/api/delete', { method: 'DELETE' });

  }

});

先加上 stopPropagation 看看，大概率是你没意识到的地方还绑了另一个事件。再不行就全局搜一下 delete 接口是不是别的地方也在调。

2026-02-11 23:00