如何在点击<a>链接吗?

我想这个链接有一个JavaScript对话框，要求用户“你确定吗?Y / N”。

<a href="delete.php?id=22">Link</a>

如果用户点击“是”，链接应该加载，如果“否”什么都不会发生。

我知道如何在表单中做到这一点，使用onclick运行一个返回true或false的函数。但是我如何用<a>链接做到这一点呢?

518479 次浏览
小开
最佳答案

内联事件处理程序

最简单的方法是在内联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="delete.php?id=22" onclick = "if (! confirm('Continue?')) { return false; }">Confirm OK, then goto URL (uses onclick())</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()(正如下面的评论中英航ž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)来确定如何处理该单击。如果被单击的元素是一个链接，因此具有tagName为a的tagName，则将单击处理传递给reallySure()函数。

引用:

小开

如果您使用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);
小开

只是为了好玩，我将在整个文档中使用一个事件，而不是在锚标记所有中添加一个事件:

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>";

我在第一个代码中修改了它，然后我就像我需要的那样运行。我希望我能帮助那些需要我的案子的人。

小开

你也可以试试这个:

<a href="" onclick="if (confirm('Delete selected item?')){return true;}else{event.stopPropagation(); event.preventDefault();};" title="Link Title">
Link Text
</a>
小开

大多数浏览器不会显示传递给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>

尝试更改示例中的输入值，以预览其工作方式。


提交答案