我希望这个链接有一个JavaScript对话框,询问用户“你确定吗?”Y / N”。
<a href="delete.php?id=22">Link</a>
如果用户点击“是”,链接应该加载,如果“否”什么都不会发生。
我知道如何在表单中做到这一点,使用onclick运行一个返回true或false的函数。但我如何做到这一点与<a>链接?
我希望这个链接有一个JavaScript对话框,询问用户“你确定吗?”Y / N”。
<a href="delete.php?id=22">Link</a>
如果用户点击“是”,链接应该加载,如果“否”什么都不会发生。
我知道如何在表单中做到这一点,使用onclick运行一个返回true或false的函数。但我如何做到这一点与<a>链接?
当前回答
只是为了好玩,我将在整个文档中使用一个事件,而不是向所有锚标记添加一个事件:
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?' );
}
};
如果有很多锚标记,这种方法会更有效。当然,当您将此事件添加到具有所有锚标记的容器中时,效率会更高。
其他回答
使用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>";
我在第一个代码中修改了它,然后我就像我需要的那样运行。我希望我能帮助那些需要我的案子的人。
内联事件处理程序
以最简单的方式,可以在内联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>
如果您使用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);
或者对于旧版本的ie浏览器:
document.getElementById('mylinkid').attachEvent('onclick', myClickHandler);
<a href="delete.php?id=22" onclick = "if (! confirm('Continue?')) { return false; }">Confirm OK, then goto URL (uses onclick())</a>
只是为了好玩,我将在整个文档中使用一个事件,而不是向所有锚标记添加一个事件:
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?' );
}
};
如果有很多锚标记,这种方法会更有效。当然,当您将此事件添加到具有所有锚标记的容器中时,效率会更高。