点击<a>链接时如何显示确认对话框？
我想要这个链接有一个JavaScript对话框询问用户“ 你确定吗？ 是/否 “。
<a href="delete.php?id=22">Link</a> 如果用户点击“是”，链接应该加载，如果“否”，什么都不会发生。
我知道如何在窗体中使用onclick运行返回true或false的函数。 但是，我怎么做一个<a>链接？
内联事件处理程序
用最简单的方法，你可以在inline onclick处理程序中使用confirm()函数。
<a href="delete.php?id=22" onclick="return confirm('Are you sure?')">Link</a>
高级事件处理
但是通常情况下，你想分开你的HTML和Javascript ，所以我build议你不要使用内联事件处理程序，而是在你的链接上添加一个类并添加一个事件监听器。
<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>
我build议避免在线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小提琴演示 。
以上更新可以减less空间，但保持清晰度/function：
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小提琴演示 。
有点迟来的更新，使用addEventListener() （如下所示，由bažmegakapabuild议）：
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小提琴演示 。
上面将函数绑定到每个单独链接的事件上; 当你可以将事件处理（使用委托）绑定到一个祖先元素时，这可能是非常浪费的，例如：
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小提琴演示 。
因为事件处理被附加到body元素上， body元素通常包含许多其他可点击的元素，所以我使用了一个临时函数（ actionToFunction ）来确定如何处理这个点击。 如果点击的元素是一个链接，因此有一个tagName为a ，点击处理被传递给reallySure()函数。
参考文献：
-
addEventListener()。 - 有条件的（'三元'）操作符 。
-
confirm()。 -
getElementsByTagName()。 -
onclick。 -
if () {}。
<a href="delete.php?id=22" onclick = "if (! confirm('Continue?')) { return false; }">Confirm OK, then goto URL (uses onclick())</a>
如果使用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);
为了好玩，我将在整个文档中使用单个事件，而不是将事件添加到所有定位标记：
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?' ); } };
如果你有很多的锚标签，这个方法会更有效率。 当然，将这个事件添加到具有所有锚定标记的容器时，效率会更高。
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>
演示页面
使用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>";
我修改它在第一代码然后我运行，只是我需要..我希望我可以帮助别人在我的情况下inneed。
你也可以试试这个：
<a href="" onclick="if (confirm('Delete selected item?')){return true;}else{event.stopPropagation(); event.preventDefault();};" title="Link Title"> Link Text </a>
