点击文字链接弹出确认框基于js Confirm实现


当然,基于JavaScript的`confirm`函数来实现点击文字链接后弹出确认框的功能是很直接的。以下是一个简单的HTML和JavaScript代码示例,展示了如何实现这一功能:


<!DOCTYPE html>
<html>
<head>
    <title>Confirm Example</title>
</head>
<body>

<a href="#" onclick="return confirmAction()">点击这里</a>

<script>
    function confirmAction() {
        // 使用confirm函数显示确认框,并返回用户的选择
        // confirm函数的返回值是true(如果用户点击确定)或false(如果用户点击取消)
        return confirm('您确定要继续吗?');
    }

    // 注意:在a标签的onclick事件中,返回confirmAction()的返回值
    // 这会阻止默认的链接跳转行为(href="#"),除非用户点击了确认框的“确定”
</script>

</body>
</html>

在这个示例中,当用户点击“点击这里”链接时,会触发`confirmAction`函数。这个函数使用`confirm`方法显示一个带有指定消息和确定及取消按钮的对话框。如果用户点击“确定”,`confirm`方法会返回`true`,否则返回`false`。

重要的是,在`a`标签的`onclick`事件处理器中,我们返回了`confirmAction()`函数的返回值。这样,如果`confirm`方法返回`false`(即用户点击了“取消”),链接的默认行为(尽管这里`href="#"`没有实际跳转,但在实际使用中可能是指向某个URL)将被阻止。如果返回`true`,则链接的默认行为(如果有的话)将正常执行。在这个例子中,由于`href="#"`,点击“确定”后页面看起来不会发生变化,但你可以通过检查浏览器的控制台或修改`href`属性来测试不同的行为。