用JS函数替换链接的最好方法是什么？

Question

在我正在工作的一个网络应用程序中开始出现很多模式，这些模式以前只是常规的a-tag链接，现在需要一个弹出框询问“你确定吗？”。在链接将去之前。 （如果用户点击取消，没有任何反应。）

我们有一个可行的解决方案，但不知何故，我们是一个没有Javascript专家的网络应用程序商店，所以我留下了这种爬行感觉，就像有一个更好的方式来完成工作。

因此，JS专家们认为，什么是最符合标准的跨浏览器方式来完成这项工作？

（根据记录，这已经是一个需要JS一个网站，所以没有必要有一个“非JS”版本，但是，它确实需要在任何和所有合理的现代浏览器。）

（另外，对于加分这将是很好，如果人们用JS关闭不具备的联系工作，而不是绕过确认框。）

Answer 1

非侵入式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; 
}; 

如果你想叫多个链路上的同样的方法，你可以获取链接的节点列表你希望，并通过节点列表的方法应用到每一个你的循环：

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() ... 

请注意，这些劝阻做法都是可行的解决方案。

Answer 2

以下是我们如何在做它：

<a href="#" onClick="goThere(); return false;">Go to new page</a>` 

function goThere() 
{ 
    if(confirm("Are you sure?")) 
    { 
     window.location.href="newPage.aspx"; 
    } 
} 

（编辑：代码重新格式化以避免水平滚动）

Answer 3

<a href="http://..." onclick="return confirm('are you sure?')">text</a> 

Answer 4

类结合版（无需内嵌的onclick属性）：所有可确定的控制后，连结这个外部< SCRIPT>：

// 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请求实际上不应该有任何主动效果。

Answer 5

在jQuery的是一样的东西：

$("a").click(function() {if(confirm('yadda yadda')) event.stopPropagation();}); 

如果我明白了什么jgreep提到的，如果你只是想确认出现在几个环节，你的点击处理程序绑定只用正确的链接类。你可以只为锚点或任何具有该类的html元素执行此操作。

$(".conf").click(function() {if(confirm('yadda yadda')) event.stopPropagation();}); 

Answer 6

var links = document.getElementsByTagName('A'); 

for (var i = 0; i < links.length; i++) 
{ 
    links[i].onclick = function() 
    {  
     return Confirm("Are you sure?"); 
    } 
} 

这适用的消息给所有的环节，但其有点困难，以使链接不无JavaScript的自动工作（实际上它是不可能的）。

Answer 7

如果您正在使用jQuery，你会怎么做：

jQuery(document).ready(
    jQuery("a").click(){ 
     //you'd place here your extra logic 
     document.location.href = this.href; 
    } 
); 

Answer 8

看看What’s the best way to open new browser window。你可以做类似的事情，但是在打开一个新窗口之前提出确认。