如何在单击 <a> 链接时显示确认对话框
How to display a confirmation dialog when clicking an <a> link?
我希望这个链接有一个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>
高级事件处理
但通常你想把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;
}
};
}
JS小提琴演示。
以上更新以减少空间,但保持清晰度/功能:
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ž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);
}
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
元素,该元素通常包含许多其他可单击的元素,因此我使用了一个临时函数 ( actionToFunction
( 来确定如何处理该单击。如果点击的元素是一个链接,因此具有a
tagName
,则点击处理将传递给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>
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>";
我按照第一个代码修改了它,然后我按照我需要的方式运行。我希望我能帮助需要我的情况的人。
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?' );
}
};
如果有许多锚标记,则此方法会更有效。当然,当您将此事件添加到具有所有锚标记的容器时,它会变得更加高效。
大多数浏览器不显示传递给confirm()
的自定义消息。
使用此方法,如果用户更改了任何<input>
字段的值,则可以显示带有自定义消息的弹出窗口。
您只能将其应用于页面中的某些链接,甚至是其他 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>
尝试更改示例中的输入值,以预览其工作原理。
- 如果显示当前图像,则禁用链接
- 如何利用多链接延迟检查并显示ping结果,然后使用JavaScript选择最快的URL
- 显示可链接的搜索结果+对齐方式
- 根据链接显示 iframe 内容
- 如何使用Javascript对链接+显示消息进行编码
- 如何从 Web 窗体中的超链接显示 asp.net mvc 视图 asp.net
- Struts2 显示标签动态链接显示相同的行值
- 如何强制超链接显示“打开/保存”对话框,而不是在浏览器中打开它
- Fancybox链接显示另一个Fancybox
- 根据单击的超链接显示/隐藏表单
- 使用Javascript滚动到一个类,一旦它已经通过点击链接显示
- 根据图像地图链接显示不同的内容
- 使用链接显示和隐藏内容
- Html/Javascript -如何使一个Html链接显示一个url,并有它实际上被重定向到一个Javascript函
- 如何通过单击php中的链接显示消息
- 将JqGrid列模式显示为日期,超链接显示NAN/NAN/NAN
- 尝试获取正确的GET链接,该链接显示购物车中的良好信息
- 如何改变文本链接显示大,当鼠标在它上面
- 回复链接-显示/隐藏回复框
- 推特引导-通过点击链接显示模式