如何通过确认对话框实现按钮页面跳转
点击按钮时弹出确认提示，用户点击“确定”后跳转到指定页面，关键在于正确使用 window.location.href 而非依赖
你是否遇到过这样的场景：给按钮加上了确认弹窗，用户点击“确定”后，页面却纹丝不动？问题往往出在一个常见的误解上——试图让 元素像链接一样工作。
为什么按钮的 href 属性会失效？
核心原因在于， 元素原生并不支持 href 属性。这个属性是 （锚点链接）标签的专属。所以，即便你在按钮上写了 href="people/janemcdonald.html"，浏览器也会直接忽略它，不会触发任何跳转。同时，onclick="return myFunction(...)" 中的 return 在这里作用有限，它仅用于控制是否执行事件的默认行为。而 本身没有默认的跳转行为，因此即使函数返回 true，页面也不会自动导航。
那么，正确的路径是什么？答案很明确：想要实现“确认后跳转”，必须在 Ja vaScript 中显式地触发页面重定向。
✅ 正确的实现方案（HTML + Ja vaScript）
下面是一个直接有效的修复方法：
function myFunction(person) {
if (confirm("Do you want to go to " + person + "'s profile?")) {
// ✅ 关键一步：使用 window.location.href 进行显式跳转
window.location.href = "people/janemcdonald.html";
}
// 若用户点击“取消”，则不执行任何操作（这里无需 return false）
}
? 几个关键的注意事项
- 放弃无效属性：不要在
上添加href属性，它毫无作用且容易造成代码逻辑上的混淆。 - 简化事件处理：
onclick中无需使用return，因为跳转已由 Ja vaScript 主动控制，不再依赖于事件的默认行为。 - 提升代码复用性：如果需要为不同的人员按钮跳转到不同的页面，可以将 URL 作为参数传入函数，这样代码会更灵活：
function goToProfile(person, url) { if (confirm(`Do you want to go to ${person}'s profile?`)) { window.location.href = url; } } // 调用示例：
? 补充与进阶建议
当然，从现代前端开发、语义化和可访问性的角度来看，还有更优雅的实现方式。例如，可以改用 标签配合 confirm() 并阻止其默认行为（使用 event.preventDefault()），或者为 添加无障碍属性（如 role="link" 和 aria-label）并确保键盘操作的兼容性。
不过，就解决“按钮确认后跳转”这个具体需求而言，上面介绍的 window.location.href 方案无疑是最为简洁、可靠且兼容所有浏览器的选择。它直击问题核心，避免了不必要的复杂度，能让你快速达到目的。
