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

Posted

技术标签:

【中文标题】单击 <a> 链接时如何显示确认对话框?【英文标题】:How to display a confirmation dialog when clicking an <a> link? 【发布时间】:2012-05-14 19:48:07 【问题描述】:

我希望这个链接有一个 javascript 对话框,询问用户“你确定吗?是/否”。

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

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

我知道如何在表单中执行此操作,使用 onclick 运行返回 truefalse 的函数。但是如何使用&lt;a&gt; 链接来做到这一点?

【问题讨论】:

我们如何实现这个 angularjs1.x 【参考方案1】:

内联事件处理程序

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

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

高级事件处理

但通常你想separate your html and 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 只能在现代浏览器中工作(对于较旧的 IE,您可以使用 attachEvent()returnValue 并为 getElementsByClassName() 提供实现,或者使用有助于解决跨浏览器问题的库,如 jQuery)。你可以阅读更多关于this advanced event handling method on 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>

【讨论】:

真的那么简单吗!我是尴尬还是什么!我只是假设这只适用于表格。确认对话框是否适用于每个可点击元素? @Tophe 确认对话框本身与特定元素无关。 对于这么简单的事情,真的有必要将HTML和JavaScript分开吗?通过将这样一个简单而简短的函数内联,您会预见到哪些问题? @CiaranG 它总是这样开始的.它们与您的 HTML 无关。至少在我看来,至少在大多数情况下是这样。总会有特殊情况——懒惰不应该是其中之一。 @Ulysnep 根据您的edit suggestion,在内联处理程序中省略confirm(…) 之后的分号时存在错误。我无法重现。【参考方案2】:

你也可以试试这个:

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

【讨论】:

@kapa 给出的答案非常简单且不那么混乱 干得好。我想调用另一个 js 方法,它调用构造成功。这是解决我的问题。 混合返回 false、preventDefault() 和 stopPropagation() 以及与抑制任何内容相关的任何其他方法是非常丑陋的想法。在链接中,点击的传播没有任何意义。如果不想依赖 return false (正如一些人报告的那样,它有时不起作用),onclick="confirm('really?') || event.preventDefault()" 与您的代码一样,没有不相关的混乱。【参考方案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 Fiddle demo.

以上更新以减少空间,但保持清晰/功能:

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

有点晚的更新,使用addEventListener()(正如bažmegakapa 所建议的,在下面的cmets 中):

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

上面将一个函数绑定到每个单独链接的事件;当您可以将事件处理(使用委托)绑定到祖先元素时,这可能会非常浪费,例如:

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

因为事件处理附加到 body 元素,该元素通常包含许多其他可点击的元素,我使用了一个临时函数 (actionToFunction) 来确定如何处理该点击。如果单击的元素是一个链接,因此具有atagName,则单击处理将传递给reallySure() 函数。

参考资料:

addEventListener()。 Conditional ('ternary') operator。 confirm()getElementsByTagName()onclickif ()

【讨论】:

谢谢。简短的内联确认解决方案有效。为什么建议避免使用内联代码?出于显而易见的原因,我通常远离内联 CSS,但简而言之 javascript sn-ps 的原因是什么? 与不建议使用内联 CSS 的原因完全相同,它更难维护,并且会导致 HTML 更加混乱,并且如果需求发生变化,则需要大量工作来更新。 我同意不使用内联处理程序的观点。但是如果我们在脚本中附加我们的处理程序,应该使用高级模型(addEventListener)。 +1 虽然。 @bažmegakapa:我……倾向于同意;但我必须承认我还没有适应addEventListener() 模型。 您可以将if(check == true) 替换为if(check)【参考方案4】:
<a href="delete.php?id=22" onclick = "if (! confirm('Continue?'))  return false; ">Confirm OK, then goto URL (uses onclick())</a>

【讨论】:

【参考方案5】:

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>

Demo page

【讨论】:

感谢分享,当然您使用的是 Javascript,您正在添加整个库来处理非常简单的事情。这值得么?我不知道那个库,我会阅读它,如果你也将它用于其他目的,也许值得额外的负载...... 这个简单的东西有两个库?【参考方案6】:

如果您使用 addEventListener(或 attachEvent)附加事件处理程序,则此方法与上述任一答案略有不同。

function myClickHandler(evt) 
  var allowLink = confirm('Continue with link?');
  if (!allowLink) 
    evt.returnValue = false; //for older Internet Explorer
    if (evt.preventDefault) 
      evt.preventDefault();
    
    return false;
  

您可以使用以下任一方式附加此处理程序:

document.getElementById('mylinkid').addEventListener('click', myClickHandler, false);

或者对于旧版本的 Internet Explorer:

document.getElementById('mylinkid').attachEvent('onclick', myClickHandler);

【讨论】:

如果你关心老IE,别忘了window.event【参考方案7】:

只是为了好玩,我将在整个文档上使用单个事件,而不是向 all 锚标记添加事件:

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?' );
    
;

如果你有很多锚标签,这种方法会更有效。当然,当您将此事件添加到具有所有锚标记的容器中时,效率会更高。

【讨论】:

【参考方案8】:

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

使用此方法,如果您的用户更改了任何 &lt;input&gt; 字段的值,您可以显示带有自定义消息的弹出窗口。

您可以将此仅应用于某些链接,甚至可以应用于页面中的其他 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>

尝试更改示例中的输入值以预览其工作原理。

【讨论】:

【参考方案9】:

使用 PHP、HTML 和 JAVASCRIPT 进行提示

如果有人想在单个文件中使用 php、html 和 javascript,下面的答案对我有用。我附上了链接中使用的引导图标“垃圾箱”。

<a class="btn btn-danger" href="<?php echo "delete.php?&var=$var"; ?>" onclick="return confirm('Are you sure want to delete this?');"><span class="glyphicon glyphicon-trash"></span></a>

我在中间使用php代码的原因是因为我不能从一开始就使用它..

下面的代码对我不起作用:-

echo "<a class='btn btn-danger' href='delete.php?&var=$var' onclick='return confirm('Are you sure want to delete this?');'><span class='glyphicon glyphicon-trash'></span></a>";

我在第一个代码中对其进行了修改,然后我按照我的需要运行。我希望我可以帮助需要我的情况的人。

【讨论】:

以上是关于单击 <a> 链接时如何显示确认对话框?的主要内容,如果未能解决你的问题,请参考以下文章

单击链接时提示用户进行确认

html网页怎么显示对话框,确认框,提示框

仅当 Laravel 接受确认时才关闭模式

单击链接时显示警报视图

如何从确认对话框中获取结果

a链接中 JS弹出确认对话框方法