為什麼要使用href=”javascript:void(0);”(未完待續)
阿新 • • 發佈：2019-02-19
原文連結：http://www.chinacloud.cn/show.aspx?id=15041&cid=22
給<a>標籤增加href屬性，就意味著以下事情：
:link選擇器可以選擇到它
這個a標籤可以獲得焦點（可以通過tab按鍵訪問到）
在瀏覽器的預設樣式表中，有href屬性的<a>標籤才有cursor:pointer的效果（尤其是在低版本的IE上）。
綁定了onclick事件的<a>標籤，尤其是它的作用是ajax請求時，基本上我們就用不上這個標籤的預設行為，也連線不到的實際頁面，一般而言也會在CSS裡給予了這個元素的cursor等樣式。這時候還要加上href屬性，是為了：
讓<a>夠響應鍵盤事件並獲得焦點（從而螢幕閱讀器能夠讀出背後的內容，增強可訪問性）
優雅降級，在網路連線很差，還沒有載入到CSS的時候，<a>依然有手型與正常的link樣式。
給<a>標籤以href屬性，並不連線到實際的頁面的方案有：
<a href="#"></a>
<a href="#nogo"></a>
<a href="##"></a>
<a href="###"></a>
<a href="javascript:void(0);"></a>
<a href="javascript:void(0)"></a>
<a href="javascript:;"></a>
<a href="javascript:"></a>
他們的體驗有細微的差別。
1，點選這個連結後，會讓頁面跳到頭部，window.location.href末尾增加#（若window.location.href末尾沒有#），除非在js裡面捕獲onclick事件並阻止預設事件。
2有了初步的語義。但是，如果頁面裡面有id為nogo的元素，點選這個連結後，錨點機制會作用，頁面貼齊這個元素上緣。更詳細的，詳見張鑫旭的《URL錨點HTML定位技術機制、應用與問題》
3在chrome中不再預設跳轉到頁面頭部，4在IE11中不再跳轉到頁面頭部。正常的點選不會在位址列增加#，但若使用者使用open in new tab的方式（比如中鍵），就會跳到形如http://segmentfault.com/q/1010000000339082###的地址，見下方測試。
5~8作用相同，但使用了javascript偽協議。在IE6下面，這個a標籤被點選後，IE6會使得頁面中的gif暫停，並且觸發onbeforeunload事件(詳情參考這裡)，IE6認作這個頁面有了重定向，並abort之後所有的請求（參考這裡）。所以假如你在此之後替換了一個<img>的src，IE6完全不會完成這個新的請求。
所以我更傾向於使用方案4。
至於語義上LZ這種<a href="javascript:void(0)">使用方式，LS多人已經有了足夠詳細的回答。我再補充一點，這種情形依然可以做到搜尋引擎友好支援無障礙應用，方法請參考《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中，點選所有的<a>都會造成位址列的修改，並觸發hashchange事件。
所以之前說的“###不會造成位址列的改變”是錯誤的。
沒有大規模測試其他的瀏覽器，這裡做初步猜想：###的意義在於，這是字元數最少的，在所有的瀏覽器中不會導致跳轉到頁面頭部的錨點。
再次更新，這個問題引發了很多關於語義的友好討論啊，真好。
我贊同@fox同學的“不要濫用a來替代button”。
問題在於，如果需要使用button，語義解決了，多瀏覽器樣式相容又坑爹了……
這個我之前回答過，就順(you)便(yi)提一下吧：如何保證各瀏覽器下 <input><button> 定義的按鈕尺寸一樣？