我應該將哪個“href”值用於JavaScript鏈接,“#”或“javascript:void(0)”?




html performance (20)

以下是構建鏈接的兩種方法,其唯一目的是運行JavaScript代碼。 哪個更好,在功能,頁面加載速度,驗證目的等方面?

function myJsFunc() {
    alert("myJsFunc");
}
<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>

要么

function myJsFunc() {
    alert("myJsFunc");
}
 <a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>


#javascript:anything更好javascript:anything ,但以下更好:

HTML:

<a href="/gracefully/degrading/url/with/same/functionality.ext" class="some-selector">For great justice</a>

JavaScript的:

$(function() {
    $(".some-selector").click(myJsFunc);
});

您應該始終努力實現優雅降級(如果用戶未啟用JavaScript,並且具有規格和預算)。 此外,在HTML中直接使用JavaScript屬性和協議被認為是不好的形式。


'#'會將用戶帶回到頁面頂部,所以我通常會使用void(0)

javascript:; 也表現得像javascript:void(0);


使用#進行一些有趣的動作,所以我建議你使用#self如果你想節省JavaScript bla, bla,打字工作。


使用jQuery會更好,

$(document).ready(function() {
    $("a").css("cursor", "pointer");
});

並省略href="#"href="javascript:void(0)"

錨標記標記就像

<a onclick="hello()">Hello</a>

很簡單!


因此,當您使用<a />標記執行某些JavaScript操作時,如果同時放置href="#" ,則可以在事件結束時添加return false (在內聯事件綁定的情況下),如:

<a href="#" onclick="myJsFunc(); return false;">Run JavaScript Code</a>

或者您可以使用以下JavaScript更改href屬性:

<a href="javascript://" onclick="myJsFunc();">Run JavaScript Code</a>

要么

<a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

但從語義上講,上述所有實現此目的的方法都是錯誤的(儘管如此) 。 如果沒有創建任何元素來導航頁面並且有一些與之關聯的JavaScript事物,那麼它不應該是<a>標籤。

您只需使用<button />來執行操作或任何其他元素,如b,span或根據您的需要適合的任何元素,因為您可以在所有元素上添加事件。

因此,使用<a href="#"> 有一個好處 。 當你執行a href="#"時,默認情況下會在該元素上獲得光標指針。 為此,我認為你可以使用CSS這樣的cursor:pointer; 這也解決了這個問題。

最後,如果你從JavaScript代碼本身綁定事件,你可以使用event.preventDefault()來實現這個,如果你使用<a>標籤,但如果你沒有使用<a>標籤這個,你有優勢,你不需要這樣做。

所以,如果你看到,最好不要為這種東西使用標籤。


如果你問我我也不會;

如果您的“鏈接”的唯一目的是運行一些JavaScript代碼,則它不符合鏈接條件; 而是一段帶有JavaScript函數的文本。 我建議使用帶有onclick handler<span>標記和一些基本的CSS來模仿鏈接。 鏈接用於導航,如果您的JavaScript代碼不是用於導航,則它不應該是<a>標記。

例:

function callFunction() { console.log("function called"); }
.jsAction {
    cursor: pointer;
    color: #00f;
    text-decoration: underline;
}
<p>I want to call a JavaScript function <span class="jsAction" onclick="callFunction();">here</span>.</p>


我使用以下內容

<a href="javascript:;" onclick="myJsFunc();">Link</a>

代替

<a href="javascript:void(0);" onclick="myJsFunc();">Link</a>

我同意其他地方的建議,說明你應該在href屬性中使用常規URL,然後在onclick中調用一些JavaScript函數。 缺點是,他們在通話後自動添加return false

這種方法的問題是,如果函數不起作用或者如果有任何問題,鏈接將變得不可點擊。 Onclick事件將始終返回false ,因此不會調用普通URL。

這是非常簡單的解決方案。 如果函數正常工作,讓函數返回true 。 然後使用返回的值來確定是否應該取消單擊:

JavaScript的

function doSomething() {
    alert( 'you clicked on the link' );
    return true;
}

HTML

<a href="path/to/some/url" onclick="return !doSomething();">link text</a>

注意,我否定了doSomething()函數的結果。 如果它工作,它將返回true ,因此它將被否定( false )並且不會調用path/to/some/URL 。 如果函數將返回false (例如,瀏覽器不支持函數中使用的東西或其他任何錯誤),則將其否定為true並調用path/to/some/URL


我想說最好的方法是將一個href錨點轉換為你永遠不會使用的ID,例如#Do1Not2Use3This4Id5或類似的ID,你100%肯定沒有人會使用它並且不會冒犯別人。

  1. Javascript:void(0)是一個壞主意,違反了啟用CSP的HTTPS頁面上的內容安全策略https://developer.mozilla.org/en/docs/Security/CSP(感謝@ jakub.g)
  2. 使用just #會讓用戶在按下時跳回到頂部
  3. 如果未啟用JavaScript,則不會破壞頁面(除非您有JavaScript檢測代碼
  4. 如果啟用了JavaScript,則可以禁用默認事件
  5. 你必須使用href,除非你知道如何阻止你的瀏覽器選擇一些文本,(不知道使用4將刪除阻止瀏覽器選擇文本的東西)

基本上沒有人在本文中提到5我認為很重要,因為如果你的網站突然開始選擇鏈接周圍的東西,你的網站就會變得不專業。


我會用:

<a href="#" onclick="myJsFunc();return false;">Link</a>

原因:

  1. 這使得href變得簡單,搜索引擎需要它。 如果您使用其他任何內容(例如字符串),則可能會導致404 not found錯誤。
  2. 當鼠標懸停在鏈接上時,它不會顯示它是一個腳本。
  3. 通過使用return false; ,頁面不會跳到頂部或打破back按鈕。

我選擇使用javascript:void(0) ,因為使用它可能會阻止右鍵單擊打開內容菜單。 但是javascript:; 更短,做同樣的事情。


根據你想要完成的任務,你可以忘記onclick並只使用href:

<a href="javascript:myJsFunc()">Link Text</a>

它繞過了返回false的需要。我不喜歡這個#選項,因為如上所述,它會將用戶帶到頁面頂部。如果你有其他地方發送給用戶,如果他們沒有啟用JavaScript(這在我工作的地方很少,但是一個非常好的主意),那麼史蒂夫提出的方法效果很好。

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

最後,javascript:void(0)如果您不希望任何人去任何地方並且您不想調用JavaScript函數,則可以使用。如果您有想要發生鼠標懸停事件的圖像,它的效果很好,但用戶無需點擊任何內容。


當我有幾個虛假鏈接時,我更喜歡給他們一類'無鏈接'。

然後在jQuery中,我添加以下代碼:

$(function(){
   $('.no-link').click(function(e){
       e.preventDefault();
   });
});

對於HTML,鏈接很簡單

<a href="/" class="no-link">Faux-Link</a>

我不喜歡使用Hash-Tags,除非它們用於錨點,而且我只有當我有兩個以上的虛假鏈接時才執行上述操作,否則我會使用javascript:void(0)。

<a href="javascript:void(0)" class="no-link">Faux-Link</a>

通常情況下,我喜歡完全避免使用鏈接,只是在一個範圍內包裝一些內容,並將其用作激活某些JavaScript代碼的方式,如彈出窗口或內容顯示。


第一個,理想情況下,如果用戶禁用了JavaScript,可以使用真實鏈接。 只需確保返回false以防止在JavaScript執行時觸發click事件。

<a href="#" onclick="myJsFunc(); return false;">Link</a>

如果您使用Angular2,這種方式有效:

<a [routerLink]="" (click)="passTheSalt()">Click me</a>

請參見https://.com/a/45465728/2803344


老實說我也不建議。 我會使用程式化的<button></button>來表示這種行為。

button.link {
  display: inline-block;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
  color: #00f;
  text-decoration: underline;
  font: inherit;
}
<p>A button that looks like a <button type="button" class="link">link</button>.</p>

這樣您就可以指定onclick。 我還建議通過腳本綁定,而不是使用元素標記上的onclick屬性。 唯一的問題是在舊的IE中無法禁用的偽造的3d文本效果。

如果必須使用A元素,請使用javascript:void(0); 由於已經提到的原因。

  • 如果您的onclick事件失敗,將始終攔截。
  • 不會發生錯誤的加載調用,或者根據哈希更改觸發其他事件
  • 如果點擊通過(onclick throws),哈希標記可能會導致意外行為,除非它是適當的直通行為,並且您想要更改導航歷史記錄,否則可以避免它。

注意:您可以使用字符串替換0 ,例如javascript:void('Delete record 123') ,它可以作為一個額外的指示符,顯示點擊實際上會做什麼。


都不是。

如果您有一個有意義的實際URL,請將其用作HREF。 如果有人在您的鏈接中間點擊以打開新標籤或者他們禁用了JavaScript,則onclick將不會觸發。

如果這是不可能的,那麼您至少應該使用JavaScript和相應的單擊事件處理程序將錨標記註入到文檔中。

我意識到這並不總是可行的,但在我看來,應該努力開發任何公共網站。

查看Unmptrusive JavaScriptProgressive增強 (兩者都是Wikipedia)。


如果您正在使用AngularJS,則可以使用以下內容:

<a href="">Do some fancy JavaScript</a>

哪個不會做任何事情。

此外

  • 它不會帶你到頁面頂部,就像(#)一樣
    • 因此,您不需要false使用JavaScript 顯式返回
  • 它簡潔而簡潔

如果沒有,href可能沒有理由使用錨標記。

您可以在幾乎每個元素上附加事件(單擊,懸停等),那麼為什麼不使用a spandiv

對於禁用JavaScript的用戶:如果沒有後備(例如,替代方案href),他們至少應該無法查看該元素並與之交互,無論它是什麼<a><span>標記。


我基本上使用漸進增強來解釋這篇實用文章簡短的回答是你永遠不會使用javascript:void(0);#除非你的用戶界面已經推斷出JavaScript已啟用,在這種情況下你應該使用javascript:void(0); 。 此外,不要使用span作為鏈接,因為從語義上來說這是錯誤的。

在您的應用程序中使用SEO友好的URL路由,例如/ Home / Action / Parameters也是一種很好的做法。如果您有一個指向不使用JavaScript的頁面的鏈接,那麼您可以在以後增強體驗。使用指向工作頁面的真實鏈接,然後添加onlick事件以增強演示。

這是一個樣本。Home / ChangePicture是一個頁面上的表單的工作鏈接,其中包含用戶界面和標準HTML提交按鈕,但它看起來更好地註入到帶有jQueryUI按鈕的模態對話框中。無論哪種方式都可以,取決於瀏覽器,它滿足移動優先開發。

<p><a href="Home/ChangePicture" onclick="return ChangePicture_onClick();" title="Change Picture">Change Picture</a></p>

<script type="text/javascript">
    function ChangePicture_onClick() {
        $.get('Home/ChangePicture',
              function (htmlResult) {
                  $("#ModalViewDiv").remove(); //Prevent duplicate dialogs
                  $("#modalContainer").append(htmlResult);
                  $("#ModalViewDiv").dialog({
                      width: 400,
                      modal: true,
                      buttons: {
                          "Upload": function () {
                              if(!ValidateUpload()) return false;
                              $("#ModalViewDiv").find("form").submit();
                          },
                          Cancel: function () { $(this).dialog("close"); }
                      },
                      close: function () { }
                  });
              }
        );
        return false;
    }
</script>

我相信你提出了一個錯誤的二分法。這些不是唯一的兩個選擇。

我同意D4V360先生的建議,即使你使用錨標籤,你也不會真正擁有錨。您所擁有的只是文檔的特殊部分,其行為應略有不同。一個<span>標籤是更為合適。





href