href=”javascript:void(0);”這個的含義是,讓超鏈接去執行一個js函數,而不是去跳轉到一個地址,而void(0)表示一個空的方法,也就是不執行js函數。
為什么要使用href=”javascript:void(0);”
javascript:是偽協議,表示url的內容通過javascript執行。void(0)表示不作任何操作,這樣會防止鏈接跳轉到其他頁面。這么做往往是為了保留鏈接的樣式,但不讓鏈接執行實際操作,
<a href="javascript:void(0)" onClick="window.open()"> 點擊鏈接后,頁面不動,只打開鏈接
<a href="#" onclick="javascript:return false;"> 作用一樣,但不同瀏覽器會有差異。
https://www.cnblogs.com/cyjy/p/6182587.html
------------------------------分割線--------------------------------------
修正一個說法上的bug吧。對於IE6來說,點擊后gif暫停bug僅僅發生在“
javascript:
偽協議未加分號”的情形下。
給<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中不再跳轉到頁面頭部。見下方測試。
- 5~8作用相同,但使用了javascript偽協議。在IE6下面,未加分號的方案6和方案8被點擊后,IE6會使得頁面中的gif暫停,並且觸發onbeforeunload事件(詳情參考這里),IE6認作這個頁面有了重定向,並abort之后所有的請求(參考這里)。所以假如你在此之后替換了一個
<img>
的src,IE6完全不會完成這個新的請求。
我更傾向於使用方案4。
至於語義上LZ這種<a href="javascript:void(0)">
使用方式,這個貼里已經有了足夠詳細的回答。我再補充一點,這種情形依然可以做到支持無障礙應用,方法請參考《WAI-ARIA無障礙網頁應用屬性》。
更新,我做了如下的測試:
- 在IE11中,點擊###、####和#####時,頁面不再跳轉到頭部
- 在chrome中,點擊##、###、####和#####時,頁面不再跳轉到頭部。
- 但是在IE11和chrome中,點擊所有的
<a>
都會造成地址欄的修改,並觸發hashchange事件。
所以之前說的“###不會造成地址欄的改變”是錯誤的。
沒有大規模測試其他的瀏覽器,這里做初步猜想:###的意義在於,這是字符數最少的,在所有的瀏覽器中不會導致跳轉到頁面頭部的錨點。
壞處:
1、javascript:
是偽協議,是非標准化的協議
2、不能平穩退化,當用戶的瀏覽器對JS失效或禁用時點擊后什么意義都沒有
3、大部分搜索引擎不會搜索到它,因為沒有內容,從而影響排名 (#
是不是也算上空鏈?空鏈對搜索引擎也不友好)
解決方法:
1、將 javascript:
、 #
、 ###
替換成真實網址,並取消 <a>
的默認點擊事件,return false
或event.preventDefault
,如果JS失效了該鏈接雖功能上打了些折扣,但並沒有徹底失效,做到了“平穩退化”
如:本網站側邊欄的“邀請回答”的 http://segmentfault.com/q/1010000000339082#
可以替換成真實地址http://segmentfault.com/q/1010000000339082
,然后繼續它之后的事件
2、將不該是按鈕的改成按鈕。好多人都在“爛”用 <a>
,每個人都想讓它去完成 <button>
的事情,可看下這篇文章《你不能創造一個按鈕》,講的有些道理
https://www.cnblogs.com/pp-cat/p/4308736.html