单击<a>链接时如何显示确认对话框？

Question

我希望此链接有一个JavaScript对话框,询问用户" 你确定吗？是/否 ".

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

如果用户单击"是",则链接应加载,如果"否",则不会发生任何操作.

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

Answer 1

内联事件处理程序

以最简单的方式,您可以confirm()在内联onclick处理程序中使用该函数.

<a href="delete.php?id=22" onclick="return confirm('Are you sure?')">Link</a>

高级事件处理

但通常你想分开你的HTML和Javascript,所以我建议你不要使用内联事件处理程序,而是在你的链接上放一个类并为它添加一个事件监听器.

<a href="delete.php?id=22" class="confirmation">Link</a>
...
<script type="text/javascript">
    var elems = document.getElementsByClassName('confirmation');
    var confirmIt = function (e) {
        if (!confirm('Are you sure?')) e.preventDefault();
    };
    for (var i = 0, l = elems.length; i < l; i++) {
        elems[i].addEventListener('click', confirmIt, false);
    }
</script>

此示例仅适用于现代浏览器(对于您可以使用的旧IE attachEvent(),returnValue并提供实现getElementsByClassName()或使用jQuery等有助于跨浏览器问题的库).您可以在MDN上阅读有关此高级事件处理方法的更多信息.

jQuery的

我想远离被认为是一个jQuery粉丝,但DOM操作和事件处理是两个领域,它有助于最大的浏览器差异.只是为了好玩,以下是jQuery的外观:

<a href="delete.php?id=22" class="confirmation">Link</a>
...
<!-- Include jQuery - see http://jquery.com -->
<script type="text/javascript">
    $('.confirmation').on('click', function () {
        return confirm('Are you sure?');
    });
</script>

Answer 2

你也可以试试这个：

<a href="" onclick="if (confirm('Delete selected item?')){return true;}else{event.stopPropagation(); event.preventDefault();};" title="Link Title">
    Link Text
</a>

Answer 3

我建议避免使用内联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()(如bažmegakapa所建议,在下面的评论中):

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元素(通常包含许多其他可点击的元素),所以我使用了临时函数(actionToFunction)来确定如何处理该点击.如果点击的元素是一个链接,因此具有tagName的a,卡处理传递给reallySure()函数.

参考文献:

• addEventListener().
• 条件('三元')运算符.
• confirm().
• getElementsByTagName().
• onclick.
• if () {}.

Answer 4

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