如何阻止HTML a标签点击后的跳转流程？现有方案失效

你的代码问题在于：不管confirm()弹窗选OK还是Cancel，a标签的默认跳转行为都会执行，因为你没阻止它的默认动作。下面给两种可行的解决方法：

方法1：通过返回值控制跳转 #

修改a标签的onclick属性，让它返回函数的执行结果；同时在函数里根据用户的选择返回true或false——返回false会阻止a标签的默认跳转。

修改后的代码：

<!DOCTYPE html>
<html>
<body>
<a href="https://www.example.com" onclick="return myFunction()" target="_blank" rel="nofollow">example.com</a>
<script>
function myFunction() {
  return confirm("Press a button!");
  // 点击OK返回true，允许跳转；点击Cancel返回false，阻止跳转
}
</script>
</body>
</html>

如果需要更明确的逻辑分支，也可以写成：

<!DOCTYPE html>
<html>
<body>
<a href="https://www.example.com" onclick="return myFunction()" target="_blank" rel="nofollow">example.com</a>
<script>
function myFunction() {
  var confirmResult = confirm("Press a button!");
  if (confirmResult) {
    // 用户点了OK，允许跳转
    return true;
  } else {
    // 用户点了Cancel，阻止跳转
    return false;
  }
}
</script>
</body>
</html>

方法2：使用事件对象阻止默认行为 #

通过获取点击事件对象，调用preventDefault()方法直接中断a标签的默认跳转逻辑。

修改后的代码：

<!DOCTYPE html>
<html>
<body>
<a href="https://www.example.com" onclick="myFunction(event)" target="_blank" rel="nofollow">example.com</a>
<script>
function myFunction(event) {
  var confirmResult = confirm("Press a button!");
  if (!confirmResult) {
    // 取消跳转，阻止默认行为
    event.preventDefault();
  }
  // 确认的话，默认跳转行为会正常执行
}
</script>
</body>
</html>

这两种方法都能实现：点击Cancel时停留在当前页面，点击OK时正常跳转。

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