单击< a>时如何显示确认对话框链接？ [英] How to display a confirmation dialog when clicking an <a> link?

问题描述

我想让这个链接有一个JavaScript对话框询问用户你确定吗？ Y / N 。

 < a href =delete.php？id = 22> Link< ; / A> 
  

如果用户点击是，链接应该加载，如果否则不会发生。

我知道如何在表单中使用 onclick 来运行一个返回 true 或 false 。但是，我该如何使用< a> 链接？ h2>内联事件处理程序

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

 < a href =delete.php？id = 22onclick =return confirm（'Are you sure？'）> Link< / A> 
  

高级事件处理

想要分开你的HTML和Javascript ，所以我建议你不要使用内联事件处理程序，但在你的链接上添加了一个类并添加了一个事件监听器。

 < a href =delete.php？ id = 22class =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> 
  

这个例子 a>仅适用于现代浏览器（对于较老的IE，您可以使用 attachEvent（）， returnValue 并提供一个实现对于 getElementsByClassName（）或者使用像jQuery这样的库来帮助解决跨浏览器问题）。您可以阅读有关 MDN上的此高级事件处理方法的更多信息。

jQuery

我想远离被认为是jQuery的粉丝，但是DOM操作和事件处理是两个有助于大多数与浏览器差异。为了好玩，下面是 jQuery 的样子：

 < a href =delete.php？id = 22class =confirmation>连结< / a> 
 ... 
<！ - 包含jQuery  - 请参阅http://jquery.com  - > 
< script type =text / javascript> $（'。'确认'）。on（'click'，function（）{
 return confirm（'Are you sure？'）; 
}）; 
< / script> 
  

I want this link to have a JavaScript dialog that asks the user "Are you sure? 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. But how do I do this with an <a> link?

解决方案

Inline event handler

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

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

<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). You can read more about this advanced event handling method on MDN.

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. Just for fun, here is how this would look with 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>

这篇关于单击< a>时如何显示确认对话框链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！