JavaScript 使用 confirm() 实现确定与取消提示框

作者:拾光时间:2026-10-29 12:26:45浏览:456

本文介绍如何利用 JavaScript 的 confirm() 方法实现带有确定和取消按钮的提示框。通过绑定 onclick 事件,根据 confirm() 返回的布尔值控制后续逻辑,如是否执行跳转或提交操作。

JavaScript 使用 confirm() 实现确定与取消提示框

在许多网页应用中,点击按钮或其他交互元素时会触发一个提示框。若用户点击“确定”,则继续执行预设程序;若点击“取消”,则终止后续操作。具体代码实现如下所示:


<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>确定和取消提示框</title>
<style type="text/css">
div
{
 width:150px;
 margin:0px auto;
}
a
{
 font-size:12px;
 color:blue;
}
</style>
<script type="text/javascript">
window.onload=function(){
 var mylink=document.getElementById("mytest");
 mylink.onclick=function(){
  if(confirm("确定要访问吗"))
  {
    return true;
  }
  else
  {
    return false;
  }
 }
}
</script>
</head>
<body>
 <div><a href="/" id="mytest">点击跳转</a></div>
</body>
</html>

上述代码演示了点击链接时弹出提示框的场景。若用户确认,则跳转至蚂蚁部落首页;否则不执行跳转。实现该功能的关键在于使用 confirm() 函数,其参数为提示框中显示的文本内容。以下简要解析代码原理:

一、当用户点击链接时,会触发绑定在 a 元素上的 onclick 事件处理函数。

二、在事件处理函数内部,由于点击“确定”按钮时 confirm() 返回 true,而点击“取消”时返回 false,因此 if 语句会根据 confirm() 的返回值决定执行 if 分支还是 else 分支。

以上内容即为本文的全部讲解,希望对大家有帮助。

作者最新文章