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

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

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

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

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

当前回答

你也可以试试这个:

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

2017-07-19 05:28:10

其他回答

<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

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

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

内联事件处理程序

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

<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>

2012-05-05 14:38:27

大多数浏览器不会显示传递给confirm()的自定义消息。

使用此方法，如果用户更改了任何<input>字段的值，您可以显示一个带有自定义消息的弹出窗口。

您只能将此应用于页面中的某些链接，甚至其他HTML元素。只需添加一个自定义类到所有需要确认的链接，并使用以下代码应用:

$(document).ready(function() { let unsaved = false; // detect changes in all input fields and set the 'unsaved' flag $(":input").change(() => unsaved = true); // trigger popup on click $('.dangerous-link').click(function() { if (unsaved && !window.confirm("Are you sure you want to nuke the world?")) { return; // user didn't confirm } // either there are no unsaved changes or the user confirmed window.location.href = $(this).data('destination'); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" placeholder="Nuclear code here" /> <a data-destination="https://en.wikipedia.org/wiki/Boom" class="dangerous-link"> Launch nuke! </a>

尝试更改示例中的输入值，以预览其工作方式。

2019-11-15 13:35:24

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>链接时，如何显示确认对话框?

推荐文章

最新文章

标签