二次确认弹窗怎么阻止默认提交行为？

巧玲提问于 2026-03-04 14:57:21 阅读 39

交互

我在做一个表单删除功能，点了删除按钮后想弹出二次确认，用户点“确定”才真的提交。但不管我怎么写，confirm 弹窗一出来，表单就直接提交了，根本没等我点确认。

我试过在按钮的 onclick 里加 return confirm('确定删除？')，也试过用 preventDefault()，但都没用。是不是 form 的 submit 事件和按钮点击有冲突？

document.getElementById('deleteBtn').addEventListener('click', function(e) {
  e.preventDefault();
  if (confirm('确定要删除吗？')) {
    document.getElementById('myForm').submit();
  }
});

二次确认

我来解答赞 10 收藏

反馈

2 条解答

程序猿海利 Lv1

哈，这个问题我也踩过坑！关键点在于你用的是button还是input type="submit"，如果是submit类型的按钮，就算阻止了点击事件，form还是会自动提交。

别走弯路，两种方案任选：

方案一：直接把按钮改成普通button

方案二：在form的onsubmit事件里做确认（更推荐）

document.getElementById('myForm').addEventListener('submit', function(e) {

  if (!confirm('确定要删除吗？')) {

    e.preventDefault();

  }

});

我当初就是被这个坑惨了，明明阻止了点击事件，表单还是莫名其妙提交了。后来才发现submit类型的按钮有默认行为，会绕过click事件直接触发表单提交。

2026-03-08 18:11

设计师铭轩 Lv1

你这是跟默认行为较劲呢，直接监听 form 的 submit 事件就行了，别监听 button 的 click。在 submit 事件里用 e.preventDefault() 拦截，确认后再手动调 form.submit()，这样回车提交也能拦截住。

document.getElementById('myForm').addEventListener('submit', function(e) {

    e.preventDefault();

    if (confirm('确定要删除吗？')) {

        this.submit();

    }

});

2026-03-04 16:13