单击 <a> 链接时如何显示确认对话框？
我希望这个链接有一个 JavaScript 对话框，询问用户“你确定吗？是/否”。
<a href="delete.php?id=22">Link</a>
如果用户单击“是”，则应加载链接，如果“否”则不会发生任何事情。
我知道如何在表单中执行此操作，使用 onclick 运行返回 true 或 false 的函数。但是如何使用 <a> 链接执行此操作？
内联事件处理程序
以最简单的方式，您可以在内联 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>
你也可以试试这个：
<a href="" onclick="if (confirm('Delete selected item?')){return true;}else{event.stopPropagation(); event.preventDefault();};" title="Link Title">
Link Text
</a>
onclick="confirm('really?') || event.preventDefault()" 与您的代码一样，没有不相关的混乱。
我建议避免使用内联 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;
}
};
}
以上更新以减少空间，但保持清晰/功能：
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?");
};
}
使用 addEventListener() 的有点迟的更新（如 bažmegakapa 所建议的，在下面的评论中）：
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);
}
以上将一个函数绑定到每个单独链接的事件；当您可以将事件处理（使用委托）绑定到祖先元素时，这可能会非常浪费，例如：
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);
因为事件处理附加到 body 元素，该元素通常包含许多其他可点击的元素，所以我使用了一个临时函数 (actionToFunction) 来确定如何处理该点击。如果单击的元素是链接，因此具有 a 的 tagName，则单击处理将传递给 reallySure() 函数。
参考：
添加事件监听器（）。
条件（'三元'）运算符。
确认（）。
getElementsByTagName()。
点击。
如果 （） {}。
addEventListener)。 +1虽然。
addEventListener() 模型。
if(check == true) 替换为 if(check)。
<a href="delete.php?id=22" onclick = "if (! confirm('Continue?')) { return false; }">Confirm OK, then goto URL (uses onclick())</a>
加号
您可以做到，无需编写 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>
如果您使用 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);
window.event。
只是为了好玩，我将在整个文档上使用单个事件，而不是向所有锚标记添加事件：
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?' );
}
};
如果你有很多锚标签，这种方法会更有效。当然，当您将此事件添加到具有所有锚标记的容器中时，它会变得更加高效。
大多数浏览器不显示传递给 confirm() 的自定义消息。
使用此方法，如果您的用户更改了任何 <input> 字段的值，您可以显示带有自定义消息的弹出窗口。
您只能将其应用于某些链接，甚至是页面中的其他 HTML 元素。只需将自定义类添加到所有需要确认并应用的链接，使用以下代码：
$(document).ready(function() { let unsaved = false; // 检测所有输入字段的变化并设置 'unsaved' 标志 $(":input").change(() => unsaved = true); // 点击时触发弹出 $('.dangerous-link').click(function() { if (unsaved && !window.confirm("Are you sure you want to nuke the world?")) { return; //用户没有确认 } // 要么没有未保存的更改，要么用户确认了 window.location.href = $(this).data('destination'); }); }); 发射核弹！
尝试更改示例中的输入值以预览其工作原理。
使用 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>";
我在第一个代码中对其进行了修改，然后我按照我需要的方式运行。我希望我可以帮助需要我的情况的人。
confirm(…)之后省略分号时存在错误。我无法重现。