疑問：為什麼要使用href=」javascript:void(0);」？

給<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> 定義的按鈕尺寸一樣？