Confirm弹窗点击取消为啥还会执行后续操作? 打工人正汉 提问于 2026-03-11 22:02:19 阅读 45 交互 我在用原生JS写一个删除确认逻辑,点了“取消”按钮,结果后面的删除代码还是执行了,这不应该啊? 我试过用 if (confirm(...)) { ... } 包裹,但好像没起作用,是不是我哪里理解错了? function handleDelete() { confirm('确定要删除吗?'); // 无论点确定还是取消,下面这行都会执行 api.deleteItem().then(() => console.log('已删除')); } 我来解答 赞 9 收藏 分享 生成中... 手机扫码查看 复制链接 生成海报 反馈 发表解答 您需要先 登录/注册 才能发表解答 2 条解答 思捷(打工版) Lv1 你在使用 confirm 方法时,没有检查它的返回值。confirm 会返回一个布尔值,点确定返回 true,点取消返回 false。你需要根据这个返回值来决定是否执行删除操作。 你可以这样改一下你的代码: function handleDelete() { if (confirm('确定要删除吗?')) { api.deleteItem().then(() => console.log('已删除')); } else { console.log('取消删除'); } } 这样,只有当用户点击“确定”时,才会执行 api.deleteItem() 这个删除操作。点“取消”时,会执行 else 里的代码,或者什么都不做,看你怎么安排。 回复 点赞 2026-03-20 17:07 欧阳宁宁 Lv1 你的问题在于没有用confirm的返回值。confirm()会返回布尔值:点确定返回true,点取消返回false,但你没用这个返回值判断,当然会一直执行。 改一下就行: function handleDelete() { if (confirm('确定要删除吗?')) { api.deleteItem().then(() => console.log('已删除')); } } 或者先存一下返回值也行: function handleDelete() { const confirmed = confirm('确定要删除吗?'); if (confirmed) { api.deleteItem().then(() => console.log('已删除')); } } confirm()只是弹窗,它本身不会阻止代码执行,得靠返回值来决定是否继续走删除逻辑。 回复 点赞 1 2026-03-11 22:05 加载更多 相关推荐 2 回答 41 浏览 点击确认弹窗后怎么阻止删除操作执行? 我在做一个删除功能时遇到问题,给删除按钮绑定了点击事件,用了confirm弹窗确认,但不管点确定还是取消都会执行删除操作。我明明写了if判断,这是哪里出错了? 代码是这样的: document.que... 一忠娟 交互 2026-02-11 22:54:25 2 回答 367 浏览 Confirm确认框怎么自定义样式? 我用window.confirm()弹出确认框,但默认样式太丑了,想改成和我们UI一致的风格,结果发现好像不能改? 试过在CSS里加样式,完全没反应。是不是confirm本身就没办法自定义?那有没有替... 正浩的笔记 交互 2026-03-01 17:34:18 1 回答 32 浏览 删除操作前如何优雅地加确认弹窗? 我用原生JS给一个列表的删除按钮加了确认提示,但点“取消”后还是会触发删除,逻辑好像没拦住。是不是confirm()的返回值没处理对? 这是我的HTML结构: <ul> <li>... Code°子香 交互 2026-03-24 16:04:22 1 回答 30 浏览 点击劫持防护中如何正确实现用户交互确认? 我在做安全加固时,想防止点击劫持,听说需要用户主动交互才能执行敏感操作。但我试了下,在 React 里加了个确认弹窗,结果还是被测试工具绕过了,是不是我理解错了? 比如下面这个删除按钮,点完还要 co... 婷婷 安全 2026-03-15 21:18:20 1 回答 49 浏览 Vue二次确认弹窗时表单怎么还是会直接提交? 大家好,我在做一个表单删除操作的二次确认功能,但发现即使弹出confirm对话框,表单还是会直接提交了... 代码是这样的:<form @submit="handleDelete"> &l... 开发者纳利 交互 2026-02-09 16:35:30 2 回答 101 浏览 Arco Design的Pagination分页组件如何实现点击页码后执行自定义事件? 在用Arco Design的分页组件时,我想让点击页码后除了切换页面还能执行自定义函数,但发现onChange事件返回的参数好像不对,我尝试过这样写: const handlePageChange =... 竞一 Dev 组件 2026-02-04 19:22:31 2 回答 87 浏览 PostCSS插件中如何在处理完所有节点后再执行清理操作? 我在开发一个PostCSS插件时遇到了顺序问题。想在处理完所有节点后执行清理操作,但尝试在eachAfter回调里修改节点时,发现某些节点还没处理完就报错了: postcss.plugin('my-p... Mr-春光 工具 2026-01-27 11:46:30 1 回答 28 浏览 前端如何安全地记录用户操作日志? 我们项目需要记录用户的关键操作,比如点击删除、提交表单这些行为,但又不能把敏感信息(比如 token 或用户密码)记进去。我试过用 console.log() 临时打点,但这显然不能用于生产。 现在想... Designer°可歆 安全 2026-03-26 17:01:19 1 回答 30 浏览 如何在Vue中监听页面用户点击行为并上报? 我在做前端行为监控,想记录用户在页面上的点击操作,比如点了哪个按钮、哪个链接。目前尝试在Vue组件里加了@click监听,但感觉这样每个地方都要手动埋点,太麻烦了。有没有全局监听的办法? 我试过在mo... Zz浩宇 前端 2026-03-25 14:19:26 1 回答 38 浏览 前端操作日志怎么安全地记录用户行为? 我们项目要加操作日志功能,记录用户在页面上的关键操作,比如点击了哪个按钮、修改了什么数据。但我不确定前端直接打日志会不会有安全风险? 比如现在我用 fetch('/log', { method: 'P... 万莉的笔记 安全 2026-03-25 01:45:23
confirm方法时,没有检查它的返回值。confirm会返回一个布尔值,点确定返回true,点取消返回false。你需要根据这个返回值来决定是否执行删除操作。你可以这样改一下你的代码:
这样,只有当用户点击“确定”时,才会执行
api.deleteItem()这个删除操作。点“取消”时,会执行else里的代码,或者什么都不做,看你怎么安排。改一下就行:
或者先存一下返回值也行:
confirm()只是弹窗,它本身不会阻止代码执行,得靠返回值来决定是否继续走删除逻辑。