在我正在使用的一个网络应用程序中开始大量出现的一种模式是链接，以前只是一个常规的 a-tag 链接，现在需要一个弹出框询问“你确定吗？”在链接消失之前。 （如果用户点击取消，什么都不会发生。）
我们有一个行之有效的解决方案，但不知何故，我们是一家没有 Javascript 专家的网络应用商店，所以我有一种爬行的感觉，好像有更好的方法来完成工作。
那么，JS 专家，什么是最符合标准、跨浏览器的方式来完成这项工作？
（为了记录，这已经是一个需要 JS 的网站，所以不需要有“非 JS”版本。但是，它确实需要在任何和所有相当现代的浏览器中工作。）
（另外，对于奖励积分，如果关闭 JS 的人没有链接工作，而不是绕过确认框，那就太好了。）
【问题讨论】：
标签： javascript
我们的做法如下：
<a href="#" onClick="goThere(); return false;">Go to new page</a>`
function goThere()
{
if( confirm("Are you sure?") )
{
window.location.href="newPage.aspx";
}
}
（编辑：重新格式化代码以避免水平滚动）
【讨论】：
<a href="http://..." onclick="return confirm('are you sure?')">text</a>
【讨论】：
类绑定版本（不需要内联 onclick 属性）：在所有可确认控件之后链接此外部 ：
// dangerous - warnings on potentially harmful actions
// usage: add class="dangerous" to <a>, <input> or <button>
// Optionally add custom confirmation message to title attribute
function dangerous_bind() {
var lists= [
document.getElementsByTagName('input'),
document.getElementsByTagName('button'),
document.getElementsByTagName('a')
];
for (var listi= lists.length; listi-->0;) { var els= lists[listi];
for (var eli= els.length; eli-->0;) { var el= els[eli];
if (array_contains(el.className.split(' '), 'dangerous'))
el.onclick= dangerous_click;
}
}
}
function array_contains(a, x) {
for (var i= a.length; i-->0;)
if (a[i]==x) return true;
return false;
}
function dangerous_click() {
return confirm(this.title || 'Are you sure?');
}
dangerous_bind();
由于提交/按钮上的绑定也起作用，这有点冗长。通常，尽管拥有“危险”选项是有意义的，但您希望在按钮而不是链接上进行确认。由链接触发的 GET 请求不应真正产生任何积极影响。
【讨论】：
在 jquery 中是这样的：
$("a").click(function() {if(confirm('yadda yadda')) event.stopPropagation();});
如果我理解 jgreep 提到的内容，如果您只希望确认出现在几个链接上，您可以将点击处理程序仅绑定到具有正确类的链接。您只能对锚点或任何具有该类的 html 元素执行此操作。
$(".conf").click(function() {if(confirm('yadda yadda')) event.stopPropagation();});
【讨论】：
var links = document.getElementsByTagName('A');
for (var i = 0; i < links.length; i++)
{
links[i].onclick = function ()
{
return Confirm("Are you sure?");
}
}
这会将消息应用于所有链接，但是在没有 javascript 的情况下使链接无法自动工作有点困难（实际上是不可能的）。
【讨论】：
不显眼的 Javascript
最佳做法是向链接添加事件处理程序方法。
confirm() 函数会生成您描述的对话框，并根据用户的选择返回 true 或 false。
链接上的事件处理方法有一个特殊的行为，如果它们返回 false，它们会终止链接操作。
var link = document.getElementById('confirmToFollow');
link.onclick = function () {
return confirm("Are you sure?");
};
如果您想要需要 javascript 的链接，则必须编辑 HTML。删除href：
<a href="#" id="confirmToFollow"...
您可以在事件处理程序中显式设置链接目标：
var link = document.getElementById('confirmToFollow');
link.onclick = function () {
if( confirm("Are you sure?") ) {
window.location = "http://www.stackoverflow.com/";
}
return false;
};
如果你想在多个链接上调用相同的方法，你可以获取你想要的链接的 nodeList，并在循环通过 nodeList 时将方法应用于每个链接：
var allLinks = document.getElementsByTagName('a');
for (var i=0; i < allLinks.length; i++) {
allLinks[i].onclick = function () {
return confirm("Are you sure?");
};
}
这里有相同想法的进一步排列，例如使用类名来确定哪些链接将侦听该方法，并根据其他一些标准将唯一位置传递给每个链接。他们是六个之一，六个另一个。
替代方法（不鼓励的做法）：
一种不鼓励的做法是通过onclick属性附加一个方法：
<a href="mypage.html" onclick="...
另一个不鼓励的做法是将 href 属性设置为函数调用：
<a href="javascript: confirmLink() ...
请注意，这些不鼓励的做法都是可行的解决方案。
【讨论】：
如果你使用 jQuery，你会这样做：
jQuery(document).ready(
jQuery("a").click(){
//you'd place here your extra logic
document.location.href = this.href;
}
);
【讨论】：
看看What’s the best way to open new browser window。你可以做类似的事情，但在打开新窗口之前抛出确认。
【讨论】：