如何解决confirm弹窗点击“取消”后仍触发链接跳转的问题

当前代码的核心逻辑漏洞在于：

• 按钮被嵌套在<a>跳转标签内部，点击按钮时事件会冒泡触发外层<a>标签的原生默认跳转行为
• 原有myAlert()函数没有针对“用户点击取消”的场景做默认行为拦截，无论confirm弹窗返回什么结果，<a>标签的跳转动作都会被执行
• 原有事件绑定没有把函数的返回值透传给浏览器的事件处理机制，就算函数内部写了取消逻辑，浏览器也无法感知拦截指令。

方法1：透传事件返回值，利用浏览器原生拦截规则 #

浏览器的事件处理规则中，如果点击事件的内联处理语句最终返回false，就会自动阻止当前元素及冒泡路径上所有元素的原生默认行为（也就是<a>标签的跳转）。
具体修改两步：

1. 修改myAlert()函数的逻辑，根据confirm的结果返回对应布尔值：

   function myAlert(){
       const userAgree = confirm('Are you sure you want to sign up?')
       if (userAgree) {
           console.log('Thank you.');
           return true // 用户确认，不拦截跳转
       } else {
           return false // 用户取消，返回拦截指令
       }
   }
   

2. 修改按钮的onclick绑定，把函数的返回值透传给浏览器的事件处理流程：
   把原来的<button onclick="myAlert()">Sign up</button>改成<button onclick="return myAlert()">Sign up</button>

   注意：如果省略return关键字，哪怕函数内部返回了false，浏览器也会忽略这个返回值，依然执行跳转。

方法2：通过事件对象主动阻止默认行为 #

如果不想写内联的return语句，可以直接给事件处理函数传入原生event对象，在用户点击取消时主动拦截<a>标签的跳转动作：

1. 修改按钮的onclick绑定，把事件对象传给处理函数：
   <button onclick="myAlert(event)">Sign up</button>
2. 修改myAlert()函数，在取消分支调用preventDefault()方法：

   function myAlert(e){
       const userAgree = confirm('Are you sure you want to sign up?')
       if (userAgree) {
           console.log('Thank you.');
       } else {
           // 阻止当前冒泡路径上所有元素的默认行为，包含a标签的跳转
           e.preventDefault()
       }
   }
   

结构优化建议 #

从语义规范角度，不推荐把<button>嵌套在<a>标签内部的写法，这种嵌套本身不符合HTML标签的语义规则。更合理的实现是：

• 移除外层的<a>标签，给按钮加上和链接一致的样式
• 把跳转逻辑挪到JS里执行：用户点击confirm确认后，再通过window.location.href = '333.html'完成跳转，点取消就不执行任何跳转动作。

• 不要只写confirm判断逻辑，不拦截<a>标签的原生默认跳转，原生行为的优先级高于你在函数里写的判断分支
• 写返回值拦截逻辑时，一定要在onclick绑定里加return透传，否则拦截逻辑不会生效

内容的提问来源于stack exchange，提问作者Keller Adams