謹慎使用javascript:void(0)，為什麼這樣寫不好-js教程-PHP中文網

謹慎使用javascript:void(0)，為什麼這樣寫不好

零下一度

發布： 2017-05-17 16:03:45

原創

5142 人瀏覽過

修正一個說法上的bug吧。對於IE6來說，點擊後gif暫停bug僅僅發生在「javascript:偽協議未加分號」的情形下

<a href="javascript:void(0)">

登入後複製

這樣寫為什麼不好?

我再來提供一個視角吧。

為標籤增加href屬性，就意味著以下事情：

:link選擇器可以選擇到它

這個a標籤可以獲得焦點（可以透過tab按鍵存取）

在瀏覽器的預設樣式表中，有href屬性的標籤才有cursor:pointer的效果（尤其是在低版本的IE上）。

綁定了 onclick 事件的標籤，尤其是它的作用是ajax請求時，基本上我們就用不上這個標籤的預設行為，也連接不到的實際頁面，一般而言也會在CSS裡給予了這個元素的cursor等樣式。這時候還要加上href屬性，是為了：

讓夠響應鍵盤事件並獲得焦點（從而屏幕閱讀器能夠讀出背後的內容，增強可訪問性）

優雅降級，在網路連線很差，還沒載入到CSS的時候，依然有手型與正常的link樣式。

給標籤以href屬性，並不連接到實際的頁面的方案有：

1.
2.
3.
4.
5.
6.<a href="javascript:void(0)">
7.
8.

登入後複製

他們的體驗有細微的差別。

1，點擊這個連結後，會讓頁面跳到頭部，window.location.href末尾增加#（若window.location.href末尾沒有#），除非在js裡面捕獲onclick事件並阻止預設事件。

2有了初步的語意。但是，如果頁面裡面有id為nogo的元素，點擊這個連結後，錨點機制會作用，頁面貼齊這個元素上緣。更詳細的，詳見張鑫旭的《URL錨點HTML定位技術機制、應用與問題》

3在chrome中不再預設跳到頁面頭部，4在IE11中不再跳到頁面頭部。請參閱下方測試。

5~8作用相同，但使用了javascript偽協定。在IE6下面，未加分號的方案6和方案8被點擊後，IE6會使得頁面中的gif暫停，並且觸發onbeforeunload事件(詳情參考這裡)，IE6認作這個頁面有了重定向，並abort之後所有的請求（參考這裡）。所以假如你在此之後取代了一個的src，IE6完全不會完成這個新的請求。

我比較傾向於使用方案4。

至於語意上LZ這種<a href="javascript:void(0)">使用方式，這裡已經有了足夠詳細的答案。我再補充一點，這種情形依然可以做到支援無障礙應用，方法請參考《WAI-ARIA無障礙網頁應用屬性》。

更新，我做瞭如下的測試：

 <p>
            <a href="#">#</a>
        </p>
        <p>
            <a href="##">##</a>
        </p>
        <p>
            <a href="###">###</a>
        </p>
        <p>
            <a href="####">####</a>
        </p>
        <p>
            <a href="#####">#####</a>
        </p>
        <script type="text/javascript">
            var n = 0 ;            window.onhashchange = function(){
                alert(++n) ;
            }        </script>

登入後複製

在IE11中，點擊

、

#和

##時，頁面不再跳到頭部

在chrome中，點擊##、

、

#和

##時，頁面不再跳到頭部。

但在IE11和chrome中，點選所有的都會造成網址列的修改，並觸發hashchange事件。

所以之前說的「不會造成網址列的改變」是錯誤的。沒有大規模測試其他的瀏覽器，這裡做初步猜想：的意義在於，這是字元數最少的，在所有的瀏覽器中不會導致跳到頁面頭部的錨點。

這麼寫沒什麼不好的，表明該部分的外觀像鏈接，滑鼠需要手型，需要響應點擊，但沒有實際動作。用來替代href="#"。這種寫法實質上並不算做html混雜js。