很多年前華哥製作網站當處在測試階段時, 由於所要連結的最終頁面url並沒有確定, 但又需當滑鼠移至某個連結時所看到的是個手型(即可以點擊的連結形態), 就給a標籤的href屬性加上一個#號, 如下:
試著點一下的話, 它只會跳到當前網頁的頂部, 不會打開別的網頁。
在網站製作的測試階段, 可以把href=#當成一個虛的連結, 或一個假連結來用(至少我以前就是這麼幹的, 特別是在製作範本html時, 後面會被替換為有具體指向的url頁面), 然而實際上從認知上來說, href=#並不是虛的、假的或空的連結, 它是錨連結。 為了不至於理解混亂, 就需要參考w3c給出的標準解釋。 以下參考w3cschool。
點擊#號, 就跳至頁面頂部, 這說明至少發生了點什麼。
要是什麼也不要讓它發生, 那當如何呢?
示例url1:http://www.xueerxing.com/
示例url2:https://www.kujiale.com/wenba/question/139965
那這兩個東東, 到底是什麼意思, 起到什麼作用呢?
void 是JavaScript 的一個運算子, 表示點擊這個連結後執行一條javascript語句:void(0); void(0)計算一個運算式但是不返回值, 這條語句表示什麼也不會做, 是個空語句。
2.我的大學
javascript: 是一個偽協議(如同常見的mail:、tel:)。 它可以讓我們通過一個連結來調用javascript函數。
javascript:是表示在觸發默認動作時,
執行一段JavaScript代碼,
去掉a標籤的默認行為;而 javascript:; 表示什麼都不執行(華哥理解:這和void(0)是一個意思嘛,
採用這個方式 javascript:;可以實現A標籤的點擊事件運行時, 如果頁面內容很多, 有捲軸時, 頁面不會亂跳, 使用者體驗更好。
最後華哥從使用角度, 加以簡單的歸納總結與區分。
href=#是錨連接。 有時會把它當成空連結來用, 測試階段無關緊要, 用在網站成品中則是很low的(程式師會鄙視)。
javascript:void(0)就是什麼都不做的意思。 它僅僅表示一個死連結, 是真正的死連結, 在連結中調用腳本時候最好用void(0)。
javascript:;和javascript:void(0),道理上應當是不同的, 但使用上沒看出啥差別, 或許javascript:;用戶體驗更好?你喜歡哪個就擼哪個吧。
一切變化不離其宗, 最後, 再來溫習下w3c給出的a標籤的href屬性說明和javascript的void()操作符。
href 屬性定義和用法
href 屬性的值可以是任何有效文檔的相對或絕對 URL, 包括片段識別字和 JavaScript 程式碼片段。 如果用戶選擇了 標籤中的內容, 那麼流覽器會嘗試檢索並顯示 href 屬性指定的 URL 所表示的文檔, 或者執行 JavaScript 運算式、方法和函數的清單。
javascript:void(0) 含義
javascript:void(0) 中最關鍵的是 void 關鍵字, void 是 JavaScript 中非常重要的關鍵字, 該操作符指定要計算一個運算式但是不返回值。