javascript - 单击<a>链接</a>时如何显示确认对话框<a>？</a>(How to display a confirmation dialog when clicking an <a> link?)

Question

I want this link to have a JavaScript dialog that asks the user “ Are you sure?

(我希望此链接具有一个JavaScript对话框，询问用户“ 您确定吗？)

Y/N ”.

(是/否 ”。)

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

If the user clicks “Yes”, the link should load, if “No” nothing will happen.

(如果用户单击“是”，则链接应该加载，如果“否”，则什么也不会发生。)

I know how to do that in forms, using onclick running a function that returns true or false .

(我知道如何在表单中使用onclick运行返回true或false的函数来执行此操作。)

But how do I do this with an <a> link?

(但是我该如何使用<a>链接呢？)

  ask by Christoffer translate from so

Answer 1

Inline event handler(内联事件处理程序)

In the most simple way, you can use the confirm() function in an inline onclick handler.

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

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

Advanced event handling(高级事件处理)

But normally you would like to separate your HTML and Javascript , so I suggest you don't use inline event handlers, but put a class on your link and add an event listener to it.

(但是通常您希望将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>

This example will only work in modern browsers (for older IEs you can use attachEvent() , returnValue and provide an implementation for getElementsByClassName() or use a library like jQuery that will help with cross-browser issues).

(该示例仅适用于现代浏览器（对于较旧的IE，您可以使用attachEvent() ， returnValue并提供getElementsByClassName()的实现，或者使用类似jQuery的库来解决跨浏览器问题）。)

You can read more about this advanced event handling method on MDN .

(您可以在MDN上阅读有关此高级事件处理方法的更多信息。)

jQuery(jQuery的)

I'd like to stay far away from being considered a jQuery fanboy, but DOM manipulation and event handling are two areas where it helps the most with browser differences.

(我想远离被视为jQuery迷的地方，但是DOM操作和事件处理是两个在浏览器差异方面最有用的地方。)

Just for fun, here is how this would look with jQuery :

(只是为了好玩，这就是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>