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

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

交互

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

代码是这样的：


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

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

我来解答赞 7 收藏

反馈

2 条解答

❤综敏 Lv1

我遇到过类似的问题，问题其实出在默认行为上。你的代码逻辑是对的，但可能删除按钮本身在表单里或者有默认提交行为。

试试这个方法：在事件监听里加个return false;，或者在if条件里加else阻止默认行为。修改后的代码：

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

  e.preventDefault();

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

  if(confirmDelete) {

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

  } else {

    return false; // 关键在这里

  }

});

另一个可能是你用了表单按钮，它会自动提交。如果上面方法不行，试试把按钮类型改成button：
<button type="button" class="delete-btn">

我上次排查这种问题时差点怀疑人生，结果发现是表单自动提交在捣鬼...

2026-03-08 08:04

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