本文详细介绍在 JavaScript 中实现删除按钮点击后弹出确认框的四种常见方法。通过示例代码展示如何结合 HTML 的 onclick 事件与 JS 的 confirm 函数，判断用户是否执行删除操作。涵盖返回布尔值、阻止默认行为及直接跳转链接等多种实现技巧，帮助开发者快速完成前端交互功能。
删除确认框实现方案概述
核心需求是：当用户点击页面上的删除按钮时，系统需弹出一个确认对话框。若用户选择“确定”，则继续执行后续的删除逻辑；若选择取消，则终止操作，不进行任何数据变更。
以下是实现该功能的具体 JavaScript 代码示例。
方法一：标准 confirm 函数封装
function del() {
var msg = "您真的确定要删除吗？\n\n请确认！";
if (confirm(msg)==true){
return true;
}else{
return false;
}
}
对应的 HTML 结构代码如下。
方法二：HTML 属性直接调用
<a href="" onclick="javascript:return del();">删除</a>
第二种实现方式如下：
方法三：完整 HTML 页面示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>确认是否删除</title>
<script type="text/javascript">
function del(){
if(!confirm("确认要删除？")){
window.event.returnValue = false;
}
}
</script>
</head>
<body>
<a href="http://www.baidu.com" onclick="return del()">删除</a>
</body>
</html>
第三种实现方式如下：
方法四：内联条件判断跳转
<a href="javascript:if(confirm('确实要删除吗?'))location='jb51.php?id='">删除</a>第四种实现方式如下：
方法五：独立函数返回布尔值
<script type="text/javascript" language="javascript">
<!--
function confirmAct()
{
if(confirm('确定要执行此操作吗?'))
{
return true;
}
return false;
}
//-->
</script>
<a href="operate.php?mod=user&act=delete&id=564" onclick="return confirmAct();">执行操作</a>上述内容涵盖了本文介绍的所有实现方案，供读者参考使用。