当点击<a>链接时，如何显示确认对话框?

我希望这个链接有一个JavaScript对话框，询问用户“你确定吗?”Y / N”。

<a href="delete.php?id=22">Link</a>

如果用户点击“是”，链接应该加载，如果“否”什么都不会发生。

我知道如何在表单中做到这一点，使用onclick运行一个返回true或false的函数。但我如何做到这一点与<a>链接?

当前回答

使用PHP, HTML和JAVASCRIPT提示

如果有人想在一个文件中使用php, html和javascript，下面的答案对我来说是有效的。我附上了使用的引导图标“垃圾”的链接。

<a class="btn btn-danger" href="<?php echo "delete.php?&var=$var"; ?>" onclick="return confirm('Are you sure want to delete this?');"><span class="glyphicon glyphicon-trash"></span></a>

我在中间使用PHP代码的原因是因为我不能从一开始就使用它。

下面的代码不为我工作:-

echo "<a class='btn btn-danger' href='delete.php?&var=$var' onclick='return confirm('Are you sure want to delete this?');'><span class='glyphicon glyphicon-trash'></span></a>";

我在第一个代码中修改了它，然后我就像我需要的那样运行。我希望我能帮助那些需要我的案子的人。

2017-01-03 06:17:46

其他回答

jAplus

不需要编写JavaScript代码就可以做到这一点

<head>
   <script src="/path/to/jquery.js" type="text/javascript" charset="utf-8"></script>
   <script src="/path/to/jquery.Aplus.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
...
   <a href="delete.php?id=22" class="confirm" title="Are you sure?">Link</a>
...
</body>

演示页面

2013-12-05 19:29:53

<a href="delete.php?id=22" onclick = "if (! confirm('Continue?')) { return false; }">Confirm OK, then goto URL (uses onclick())</a>

2012-05-05 14:38:59

我建议避免内联JavaScript:

var aElems = document.getElementsByTagName('a');

for (var i = 0, len = aElems.length; i < len; i++) {
    aElems[i].onclick = function() {
        var check = confirm("Are you sure you want to leave?");
        if (check == true) {
            return true;
        }
        else {
            return false;
        }
    };
}

JS小提琴演示。

上面的更新减少了空间，但保持了清晰/功能:

var aElems = document.getElementsByTagName('a');

for (var i = 0, len = aElems.length; i < len; i++) {
    aElems[i].onclick = function() {
        return confirm("Are you sure you want to leave?");
    };
}

JS小提琴演示。

一个有点迟的更新，使用addEventListener()(由baommegakapa在下面的评论中建议):

function reallySure (event) {
    var message = 'Are you sure about that?';
    action = confirm(message) ? true : event.preventDefault();
}
var aElems = document.getElementsByTagName('a');

for (var i = 0, len = aElems.length; i < len; i++) {
    aElems[i].addEventListener('click', reallySure);
}

JS小提琴演示。

上述方法将一个函数绑定到每个单独链接的事件;当你可以将事件处理(使用委托)绑定到一个祖先元素时，这可能是相当浪费的，比如下面:

function reallySure (event) {
    var message = 'Are you sure about that?';
    action = confirm(message) ? true : event.preventDefault();
}

function actionToFunction (event) {
    switch (event.target.tagName.toLowerCase()) {
        case 'a' :
            reallySure(event);
            break;
        default:
            break;
    }
}

document.body.addEventListener('click', actionToFunction);

JS小提琴演示。

由于事件处理附加到body元素上，body元素通常包含许多其他可单击的元素，因此我使用了一个临时函数(actionToFunction)来确定如何处理该单击。如果被单击的元素是一个链接，因此tagName为a，则将单击处理传递给reallySure()函数。

引用:

addEventListener()。条件('三元')运算符。确认()。 getElementsByTagName()。 onclick。 If(){}。

2012-05-05 14:39:37

使用PHP, HTML和JAVASCRIPT提示

如果有人想在一个文件中使用php, html和javascript，下面的答案对我来说是有效的。我附上了使用的引导图标“垃圾”的链接。

<a class="btn btn-danger" href="<?php echo "delete.php?&var=$var"; ?>" onclick="return confirm('Are you sure want to delete this?');"><span class="glyphicon glyphicon-trash"></span></a>

我在中间使用PHP代码的原因是因为我不能从一开始就使用它。

下面的代码不为我工作:-

echo "<a class='btn btn-danger' href='delete.php?&var=$var' onclick='return confirm('Are you sure want to delete this?');'><span class='glyphicon glyphicon-trash'></span></a>";

我在第一个代码中修改了它，然后我就像我需要的那样运行。我希望我能帮助那些需要我的案子的人。

2017-01-03 06:17:46

只是为了好玩，我将在整个文档中使用一个事件，而不是向所有锚标记添加一个事件:

document.body.onclick = function( e ) {
    // Cross-browser handling
    var evt = e || window.event,
        target = evt.target || evt.srcElement;

    // If the element clicked is an anchor
    if ( target.nodeName === 'A' ) {

        // Add the confirm box
        return confirm( 'Are you sure?' );
    }
};

如果有很多锚标记，这种方法会更有效。当然，当您将此事件添加到具有所有锚标记的容器中时，效率会更高。

2012-05-05 15:49:05

当点击<a>链接时，如何显示确认对话框?

推荐文章

最新文章

标签