最简方案是给 标签添加 onclick="return confirm('...')"，必须显式 return 才能阻止跳转；常见错误是仅调用 confirm() 而未返回其值，导致弹窗无效、跳转照常发生。
点击 <a></a> 标签时阻止跳转并弹出确认框
直接给 <a href="xxx"></a> 加 onclick="return confirm('...')" 是最简方案，但必须返回 false 才能真正阻止跳转。常见错误是只写 confirm(...) 而不加 return，结果对话框一闪而过，页面照常跳转。
正确写法示例：
<a href="https://example.com" onclick="return confirm('确定要离开当前页面？')">前往示例网站</a>
- 如果用户点“取消”，
confirm()返回false，return false阻止默认行为 - 如果用户点“确定”，
confirm()返回true，return true允许跳转（也可省略return，但显式写出更清晰） - 注意：不要在
href里写javascript:void(0)再手动window.location，那样会丢失浏览器前进/后退历史和 SEO 友好性
用 addEventListener 绑定更可控的点击逻辑
内联 onclick 容易污染 HTML，且无法统一处理多个链接。推荐用脚本集中管理：
document.querySelectorAll('a[data-confirm]').forEach(link => {
link.addEventListener('click', function(e) {
if (!confirm(this.dataset.confirm)) {
e.preventDefault();
}
});
});
对应 HTML：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
<a href="/delete?id=123" data-confirm="此操作不可撤销，确定删除？">删除</a>
-
data-confirm属性存提示文案，解耦内容与逻辑 -
e.preventDefault()显式拦截，比依赖return更可靠 - 适合需要动态生成文案（如拼接 ID）、或统一加 loading 状态的场景
- 注意：不要对所有
<a></a>盲目监听，避免误拦内部锚点（href="#section"）或下载链接（href="file.pdf"）
alert() 和 confirm() 在链接跳转中不能混用
用 alert() 替代 confirm() 是典型误用 —— 它没有“取消”路径，用户点了“确定”后跳转已发生，无法撤回。尤其在删除、退出登录等关键操作中，alert() 完全起不到防护作用。
-
alert()只适合纯通知（如“操作已完成”），且应放在跳转之后，而非之前 -
confirm()才是跳转前校验的正确选择，它天然提供二元决策出口 - 移动端 Safari 对
confirm()的阻塞行为更严格，连续点击可能触发多次弹窗，需配合节流（如禁用按钮 1 秒） - 如果提示内容含变量（如用户名），务必先做转义：
confirm(`确定删除 ${username.replace(/"/g, '"')}？`)，避免引号破坏 HTML 结构
现代项目中该不该继续用原生 confirm()？
答案取决于场景。原生 confirm() 兼容性极好（IE8+ 都支持），但样式不可控、无法定制按钮文字、在 iOS 上会暂停定时器，且无障碍支持弱（无 ARIA 标签、焦点管理缺失）。
- 后台管理类系统、内部工具：够用，无需升级
- 面向公众的官网、电商、SaaS 产品：建议用自定义模态框（
<dialog></dialog>+showModal()或第三方库），可统一品牌色、加图标、支持键盘导航（Tab / Esc） - 特别注意：
<dialog></dialog>在 Safari 15.4+ 才完全支持showModal()，旧版需 polyfill；若用confirm()，别指望它能替代服务端校验 —— 用户禁用 JS 后照样能发请求
