Hrefs 與 JavaScript onclick（關於 Unobtrusive JavaScript）

Question

使用帶有顯式 href 指向您網站中其他頁面的鏈接/<a> 標記（即href="/blah/blah/blah.html ）與具有沒有的 hrefs/divs/etc. 的最佳實踐是什么？一個顯式的 href 並將它們的 onclick 設置在文檔就緒處理程序中，例如 main.js 文件中的 JavaScript。

我不是 Web 開發方面的專家，但我很喜歡學習 jQuery 等，並且發現自己訂閱了 Unobtrusive JavaScript 的概念。 雖然上面的兩個選項都沒有打破這種心態的“不要在 HTML 中包含 JavaScript”部分，但我想我已經掛斷了“結構和表現與行為的分離”。 雖然對我來說，在其中放置一個 <a> 標簽並顯式設置 href 對我來說更自然，但我發現自己認為這確實是一種行為，因此應該在 JS 中設置。

那會很遠，還是我只是不習慣？ 我的另一面看到了將它放在 JS 中的好處，b/c 現在我有能力完全控制該鏈接的行為，而無需更改 HTML 中的任何內容。 我想你會說我在眾所周知的圍欄上。 請幫我倒下。 =)

（注意：該站點大量使用 JavaScript，因此在關閉 JS 的情況下提供功能的概念並不是真正的問題，因為如果沒有它，大多數站點將無法運行。）

Answer 1

由於多種原因，這確實太過分了。

1. 它主要是棘手的代碼，應該避免。
2. 它不會為您的網站提供任何切實的好處。
3. 對 no-js 沒有雄辯的回退。
4. 它對SEO有負面影響。 具體來說，機器人不會運行您的腳本，因此不會看到鏈接，最終也不會正確索引您的網站。
5. 可能最重要的是，這種效果會嚴重影響屏幕閱讀器或禁用 JS 的用戶的 UX（例如，許多手機瀏覽器禁用 JS）

最后，除非您明確需要打破常規（例如遺留支持），否則您應該盡量遵循不顯眼的設計，這在您使用 JavaScript 創建靜態結構的意義上非常顯眼，這是用 HTML 來做要好得多。

Answer 2

普通用戶不會真正知道其中的區別。 但是，如果您希望蜘蛛跟蹤它們，搜索引擎和 SEO 實踐將要求您使用 href="" 鏈接到您的其他頁面。 如果訪問者使用某些屏幕閱讀器或有一些特殊的可訪問性需求，則相同。 許多人閱讀源代碼而不是 DOM。

一般來說，如果您要鏈接到頁面和操作，請使用 href。

如果您需要附加附加功能或不真正轉到另一個頁面或操作，請使用 javascript onclick 樣式，或使用 jQuery 附加事件。

Answer 3

鏈接不是行為——它們代表一個文檔和另一個文檔之間的鏈接。 當您單擊鏈接時，Web 瀏覽器提供導航到鏈接頁面的行為，但這是瀏覽器的行為，並且每個瀏覽器都有自己的約定來最好地執行此操作 — 例如，主要單擊可能會在當前位置打開頁面選項卡，中鍵可能會在新選項卡中打開，而 M4 可能會在新頁面中打開鏈接。 用行為替換這些原始信息會破壞瀏覽器提供這種選擇的能力。

還有其他客戶也會受到影響。 蜘蛛和其他機器人會讀取您的頁面以獲取錨標簽中的信息，以確定該頁面鏈接到的內容。 如果您改為使用“行為”，則會從頁面中剝離這些有意義的信息。

Answer 4

同意其他海報。 我要補充一點，如果 href 是靜態的——即該頁面上的交互不會改變它的值——那么您可以將其視為頁面“結構和呈現”的一部分。 在不尋常的情況下，它是動態的並且頁面上的某些操作會更改其值——這就是它成為“行為”的時候——只有這樣才適合讓 JS 處理它。

另一方面，如果現有代碼已經有 9 個動態設置的 href 並且您只是添加了一個靜態 href，我可能會遵循前任開發人員的建議以提高可讀性。

Answer 5

jquery 歷史插件非常好，它允許你設置 href='#/url" 這樣你就可以擁有真實的 url，真實的后退按鈕，但你的處理程序只是監聽綁定到 history.url 的事件。

http://tkyk.github.com/jquery-history-plugin/

對於使用屏幕閱讀器的視障用戶來說，不使用標簽可能還會帶來某種可用性問題。