javascript 单击链接时提示用户确认
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6518294/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prompt user for confirmation when clicking a link
提问by Josef Sábl
I have a link that does some potentially dangerous function (delete something). I want to prompt user if he really wants to do it. I want to do it with javascript and it should be very simple.
我有一个链接可以执行一些潜在的危险功能（删除某些内容）。我想提示用户他是否真的想这样做。我想用 javascript 来做，它应该很简单。
My solutions so far:
到目前为止我的解决方案：
<a href='/delete' onclick='return confirm("Are you sure?")'>delete</a>
.. is bad in a way that it is not triggered by middle click in Firefox and IE.
.. 在 Firefox 和 IE 中不是由中间点击触发的方式不好。
<a href='/delete' onmousedown='return confirm("Are you sure?")'>delete</a>
.. does not work. Even if true is returned on clicking Ok, link is not navigated.
.. 不起作用。即使单击确定返回 true，也不会导航链接。
What is the correct way to implement this?
实现这一点的正确方法是什么？
回答by anupam
<a href='#' onclick='confirmUser()'>delete</a>
javascript
javascript
function confirmUser(){
var ask=confirm("Are you sure");
if(ask){
window.location="/delete";
}
}
回答by John Wu
I just solved this problem for an online banking client. FDIC requires a confirmation "speedbump" whenever the user is navigating to a third party site. We wanted to do it unobtrusively, and make it impossible to get around.
我刚刚为网上银行客户解决了这个问题。每当用户导航到第三方站点时，FDIC 都需要确认“减速带”。我们想要不引人注目地做到这一点，并使其无法绕过。
I've tested this with IE, Firefox, Chrome, and Android-- click, right click, middle click, shift click, shift F10, enter, long tap, everything (Firefox is the hard one). Either you get the speedbump or you get a blank tab, you can't get around it.
我已经用 IE、Firefox、Chrome 和 Android 对此进行了测试——单击、右键单击、中键单击、Shift 单击、Shift F10、输入、长按，一切（Firefox 是最难的）。要么你得到减速带，要么得到一个空白标签，你无法绕过它。
document.ready = function() {
var handleSpeedBump = function(e) {
e.preventDefault();
var href = this.getAttribute("data-href");
var sure = confirm("Are you sure you want to navigate to " + href + "? This is a third party site and not owned by this institution.");
if (!sure) return;
document.location = href;
}
$("a.speedbump")
.click(handleSpeedBump)
.bind("contextmenu", handleSpeedBump)
.dblclick(handleSpeedBump)
.each(function() {
var href = this.href;
this.setAttribute("data-href", href);
this.href = "javascript:void('Navigate to " + href.replace("'", "") + "')";
})
}
To make this work, just write your link per normal and add "speedbump" to its classes.
要完成这项工作，只需按照正常情况编写链接并将“减速带”添加到其类中。
<A href="www.thirdpartysite.com" class="speedbump">Here is the link!</A>
