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

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

交互

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

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

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

二次确认

我来解答赞 5 收藏

反馈

1 条解答

设计师铭轩 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