當用戶點擊鏈接時執行某個功能的最佳方式是什麼？

從我的經驗，我知道三種不同的方式來執行一個JavaScript函數，當用戶點擊一個鏈接當用戶點擊鏈接時執行某個功能的最佳方式是什麼？

使用鏈路鏈路

<a href="#" onclick="myfunction();return false;">click me</a>

使用href上onclick屬性上

<a href="javascript:myfunction();">click me</a>

請勿觸摸鏈接，盡一切在js
```
<a href="#">click me</a> 
```
（在JavaScript中，我們將停止違約事件，並調用該函數）

哪一個更好？有什麼優點和缺點？

編輯刪除「的javascript：」與graceful degredation上onclick

來源

2010-09-17 pleasedontbelong

不要在onclick中說「javascript：」。這會引入一個你不需要的標籤（用於'break'，'continue'）。 – Thilo 2010-09-17 07:36:47

一般不建議不要觸及HTML *，因爲您將它放在示例3中，因爲如果您無法選擇正確的元素，則嘗試在Javascript中附加事件處理程序時會很麻煩。 – 2010-09-17 07:38:48

即使在執行方法3時，也可以使用'href'來爲非JavaScript用戶做些事情。如果這是一種對非JavaScript用戶沒有意義的行爲，那麼你可以使用javascript本身*生成*鏈接 - 這樣，唯一能看到它的人是能夠使用它的人 – Gareth 2010-09-17 07:41:42

Unobtrusive Javascript（第三個例子）是最好的選擇。

來源

2010-09-17 07:35:51 Kevin

它與CSS樣式相同 - 不要style =「」在html內部，使用選擇器來泛型化頁面並將css外包。 – sod 2010-09-17 07:39:09

，但第三個有時候意味着你必須在鏈接中提供一個id，所以你最終可以在你的Html上添加幾個id。當你有很多不同的鏈接和不同的功能時，你的JS代碼變得有點難看。 – pleasedontbelong 2010-09-17 07:40:21

不一定，很高興。您可以遍歷DOM中元素的索引。或者，您可以使用事件委派並根據類名稱，href值等來處理點擊。 – Kevin 2010-09-17 07:42:20

或者，使用jQuery

$(function() { 
    $('[id$=myLinkID]').click(function(e) { 
     myFunction(); 
    }); 
});

來源

2010-09-17 07:39:31 grimorde

這是第三個選項= P，要麼使用JQuery，mootools，原型或原生js – pleasedontbelong 2010-09-17 08:16:51

這是一件好事，有href屬性的鏈接，以便支持誰對他們的瀏覽器禁用了JavaScript的用戶。

<a href="http://www.mywebsite.com/javascriptdisabled.html" onclick="myfunction(); return false;">click me</a>

來源

2010-09-17 07:59:52

+1優勢...但它有缺點，你需要使用「return false」來停止事件，這不是什麼大事，但它一個「頭髮在湯中」 – pleasedontbelong 2010-09-17 08:28:41

'返回false'停止發射和頁面'跳躍'的鏈接，你不能避免它，如果你正在寫內聯JS（據我所知） - 是否有任何特殊原因它不能除了醜陋的事實之外，還可以使用 – 2010-09-17 08:56:55

，除此之外沒有別的理由。但是要記住，如果你從href裏面調用函數，你不需要返回false，但是你將會遇到不支持JS的瀏覽器的問題，有一天，所有的瀏覽器都會支持JS ，現在在Chrome中，甚至不可能禁用js代碼..所以我的猜測是，將來我們可以使用第二個選項，看起來更乾淨（至少對我來說） – pleasedontbelong 2010-09-17 09:18:19

以上都不是。使用click事件（分配可能作爲屬性或通過，如果你喜歡腳本）並且有一個真正的URL作爲備用：

<a href="realpage.html" onclick="myfunction(); return false;">click me</a>

或HTML：

<a href="realpage.html" id="myLink">click me</a>

腳本：

document.getElementById("myLink").onclick = function() { 
    myfunction(); 
    return false; 
};

此外，請勿在事件處理程序屬性中使用javascript:前綴代碼。這是不正確的，只是不巧合拋出錯誤（這是在JavaScript中，javascript:創建一個名爲javascript的標籤）。

來源

2010-09-17 08:38:42

謝謝，我已經糾正了這個問題，並刪除了「javascript：」，但除此之外，我沒有看到任何區別，你提出的基本上是第一和第三選項。但正如@Yi Jiang評論的那樣，如果頁面中沒有「mylink」id（例如dinamically鏈接），你可能會遇到問題。最後，這取決於你需要做什麼 – pleasedontbelong 2010-09-17 09:26:10

有一個巨大的區別：當您點擊關閉JavaScript的鏈接時，我實際上會做些什麼。 – 2010-09-17 10:27:47

ahhh你說的是「realpage.html」：P好的，當它沒有JS的時候，它會做一些事情。但那不是我的問題。我想探討選擇其中之一的優點和缺點 – pleasedontbelong 2010-09-17 20:09:02

當用戶點擊鏈接時執行某個功能的最佳方式是什麼？

回答

相關問題