用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。你可以做類似的事情，但是在打開一個新窗口之前提出確認。