我希望这个链接有一个 JavaScript 对话框，询问用户“你确定吗？是/否”。
<a href="delete.php?id=22">Link</a>
如果用户点击“是”，链接应该加载，如果“否”什么都不会发生。
我知道如何在表单中执行此操作，使用onclick运行返回的函数true或false. 但是我如何使用<a>链接来做到这一点？
单击 <a> 链接时如何显示确认对话框？
IT技术
javascript
html
dom-events
2021-01-18 04:39:19
6个回答
内联事件处理程序
以最简单的方式，您可以confirm()在内联onclick处理程序中使用该函数。
<a href="delete.php?id=22" onclick="return confirm('Are you sure?')">Link</a>
高级事件处理
但是通常您希望将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>
此示例仅适用于现代浏览器（对于较旧的 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>
你也可以试试这个：
<a href="" onclick="if (confirm('Delete selected item?')){return true;}else{event.stopPropagation(); event.preventDefault();};" title="Link Title">
Link Text
</a>
我建议避免使用内嵌 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) 来确定如何处理该点击。如果单击的元素是一个链接，因此具有tagNameof a，则单击处理将传递给该reallySure()函数。
参考：
<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>
其它你可能感兴趣的问题