|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
實例比較：空鏈接 # 與 Javascript:void(0); 哪個更好？
作者:admin 時間:2022-5-13 18:9:16 瀏覽:空鏈接有很多寫法，其中最常見的兩種寫法是：#和Javascript:void(0);，一般人會按照自己的習慣選擇使用哪一個，不過并非每個空鏈接產(chǎn)生的效果都一樣。今天，我通過實例比較，看看空鏈接 # 與 Javascript:void(0); 哪個更好。
javascript:void(0);
<a href='javascript:void(0);' 是使用<a href='#'時javascript的替代方式，返回 undefined，void(0); 是一個原始值，這迫使瀏覽器停留在同一頁面上，簡而言之，void(0);它是一個簡短的腳本，默認情況下返回 undefined。關(guān)于javascript:void(0)的更詳細解釋，你可以閱讀此文javascript:void()函數(shù)方法的解釋。
盡管在現(xiàn)代 Web 編程或 Web 設計中不建議使用 javascript 作為鏈接，因為它往往會導致錯誤，但如果有人添加書簽或鏈接嘗試在新選項卡上打開鏈接，無論如何都不可避免地要使用它們。使用它是一種提供根本不指向任何地方的 URL 的方法。所以當鏈接被點擊時，它不會被點擊，這種情況很好，但是當鏈接被指向時，URL 會顯示在狀態(tài)字段中。
在<a href='javascript:void(0)'頁面中間使用時，用戶會嘗試點擊它，因為它看起來像一個鏈接，大多數(shù)用戶習慣于頁面中間的鏈接，用戶點擊他們不知道的鏈接可能會導致他們到達什么或最終會導致什么，從而導致打開一個新的空白頁面，或者顯示javascript錯誤。
下面是關(guān)于javascript:void(0)和#如何工作的示例代碼；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p style="width:100%;height:1800px;background:#bbbbbb"></p>
<p>
<a href="#"> #空鏈接，點擊后跳到網(wǎng)頁頂部 </a><br><br>
<a href="javascript:void(0);"> void(0) 空鏈接，點擊后停在當前位置 </a></br><br>
</p>
</body>
</html>
點擊 # 鏈接會跳到頁面頂部
如上例所見，如果頁面很長，超過了一屏，當我們點擊 # 空鏈接時，頁面會跳到頂部，沒有用戶希望這樣，但使用空鏈接 <a hreft= 'javascript:void(0);' 就能很好的避免了這種情況。
如果你要使用<a hreft= '#'>但又不想點擊后跳到網(wǎng)頁頂部，那么可以為該鏈接添加一個onclick事件，代碼是：
<a href='#' onclick='return false'>#空鏈接，點擊后停在當前位置</a>
此外，還可以為該a標簽綁定一個click監(jiān)聽事件，代碼這樣：
<a href="#" id="a"> #空鏈接，點擊后停在當前位置 </a>
<script>
document.getElementById ("a").addEventListener("click", function (e) {
e.preventDefault();
return false;
}, false);
</script>
javascript:void(0)的返回值
使用javascript:void(0)時，它返回執(zhí)行腳本的值，并將顯示在瀏覽器中。執(zhí)行腳本的值來自void(0)這里，函數(shù) void 返回 null 的表達式，類似于沒有返回語句的函數(shù)；只返回 undefined，因此能夠?qū)⒋a注入<a>標簽的 href 屬性。用戶可以運行代碼，而無需瀏覽器運行代碼來替換當前頁面。
區(qū)別
href=""只會加載當前頁面，同時href="#"將當前頁面跳到頂部，而href="javascript:void(0)"什么都不做。
用標簽的單擊事件處理程序返回 false 可實現(xiàn)與javascript:void(0)相同的效果。
<a>還可使用<a id="a-id" href="#">鏈接</a>，然后將事件處理程序綁定到單擊偵聽器上，從而防止點擊后跳到網(wǎng)頁頂部。
例如：
document.getElementById("a-id").onClick = function(){
return false;
};什么時候使用#而不是javascript:void(0)？
當JavaScript被禁用時，仍然允許使用"#"，這樣的鏈接點擊后，頁面不會重新加載（點擊 href="" 的空鏈接時頁面會重新加載）。
當使用錨鏈接時，<a href= "#">更干凈，超鏈接將誘使訪問者點擊它們，期望進入新頁面或同一網(wǎng)頁中的網(wǎng)頁頂部。
javascript:{} 與 javascript:void(0)
空鏈接我們還見有人用javascript:{} ，測試發(fā)現(xiàn)，javascript:{} 與 void(0) 一樣，都是返回 undefined ，所以這兩種寫法其實沒有區(qū)別。
結(jié)論
當你希望鏈接導航到頁面頂部時使用<a href="#" >，當你希望頁面刷新而不在新選項卡上打開但確保事件偵聽器在函數(shù)上返回 false 以返回 undefined 的工作時使用Javascript:void(0);。
我想說兩個超鏈接都有自己的特殊情況，在某些情況下，兩者都可以以相同的方式執(zhí)行相同的事情。
不同之處在于javascript:void(0)在頁面上加載可能比<a href="#" >超鏈接花費更長的時間。
參考文章
相關(guān)文章
- 站長推薦
