我希望这个链接有一个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>链接?
当前回答
<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?' );
}
};
如果有很多锚标记,这种方法会更有效。当然,当您将此事件添加到具有所有锚标记的容器中时,效率会更高。
如果您使用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);
我建议避免内联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()(由baommegakapa在下面的评论中建议):
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元素上,body元素通常包含许多其他可单击的元素,因此我使用了一个临时函数(actionToFunction)来确定如何处理该单击。如果被单击的元素是一个链接,因此tagName为a,则将单击处理传递给reallySure()函数。
引用:
addEventListener()。 条件('三元')运算符。 确认()。 getElementsByTagName()。 onclick。 If(){}。
<a href="delete.php?id=22" onclick = "if (! confirm('Continue?')) { return false; }">Confirm OK, then goto URL (uses onclick())</a>
你也可以试试这个:
<a href="" onclick="if (confirm('Delete selected item?')){return true;}else{event.stopPropagation(); event.preventDefault();};" title="Link Title">
Link Text
</a>