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

javascript html dom-events

2022-08-29 23:52:38

我希望此链接有一个 JavaScript 对话框，询问用户“你确定吗？是/否”。

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

如果用户单击“是”，则应加载链接，如果“否”，则不会发生任何事情。

我知道如何在表单中执行此操作，使用运行返回或.但是，如何使用链接执行此操作？onclicktruefalse<a>

答案 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，您可以使用，并提供实现或使用像jQuery这样的库，这将有助于解决跨浏览器问题）。您可以在MDN上阅读有关此高级事件处理方法的更多信息。attachEvent()returnValuegetElementsByClassName()

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>

答案 2

您也可以尝试以下操作：

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