|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
實(shí)例比較：空鏈接 # 與 Javascript:void(0); 哪個(gè)更好？
作者:admin 時(shí)間:2022-5-13 18:9:16 瀏覽:空鏈接有很多寫法，其中最常見的兩種寫法是：#和Javascript:void(0);，一般人會(huì)按照自己的習(xí)慣選擇使用哪一個(gè)，不過并非每個(gè)空鏈接產(chǎn)生的效果都一樣。今天，我通過實(shí)例比較，看看空鏈接 # 與 Javascript:void(0); 哪個(gè)更好。
javascript:void(0);
<a href='javascript:void(0);' 是使用<a href='#'時(shí)javascript的替代方式，返回 undefined，void(0); 是一個(gè)原始值，這迫使瀏覽器停留在同一頁面上，簡(jiǎn)而言之，void(0);它是一個(gè)簡(jiǎn)短的腳本，默認(rèn)情況下返回 undefined。關(guān)于javascript:void(0)的更詳細(xì)解釋，你可以閱讀此文javascript:void()函數(shù)方法的解釋。
盡管在現(xiàn)代 Web 編程或 Web 設(shè)計(jì)中不建議使用 javascript 作為鏈接，因?yàn)樗鶗?huì)導(dǎo)致錯(cuò)誤，但如果有人添加書簽或鏈接嘗試在新選項(xiàng)卡上打開鏈接，無論如何都不可避免地要使用它們。使用它是一種提供根本不指向任何地方的 URL 的方法。所以當(dāng)鏈接被點(diǎn)擊時(shí)，它不會(huì)被點(diǎn)擊，這種情況很好，但是當(dāng)鏈接被指向時(shí)，URL 會(huì)顯示在狀態(tài)字段中。
在<a href='javascript:void(0)'頁面中間使用時(shí)，用戶會(huì)嘗試點(diǎn)擊它，因?yàn)樗雌饋硐褚粋€(gè)鏈接，大多數(shù)用戶習(xí)慣于頁面中間的鏈接，用戶點(diǎn)擊他們不知道的鏈接可能會(huì)導(dǎo)致他們到達(dá)什么或最終會(huì)導(dǎo)致什么，從而導(dǎo)致打開一個(gè)新的空白頁面，或者顯示javascript錯(cuò)誤。
下面是關(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="#"> #空鏈接，點(diǎn)擊后跳到網(wǎng)頁頂部 </a><br><br>
<a href="javascript:void(0);"> void(0) 空鏈接，點(diǎn)擊后停在當(dāng)前位置 </a></br><br>
</p>
</body>
</html>
點(diǎn)擊 # 鏈接會(huì)跳到頁面頂部
如上例所見，如果頁面很長(zhǎng)，超過了一屏，當(dāng)我們點(diǎn)擊 # 空鏈接時(shí)，頁面會(huì)跳到頂部，沒有用戶希望這樣，但使用空鏈接 <a hreft= 'javascript:void(0);' 就能很好的避免了這種情況。
如果你要使用<a hreft= '#'>但又不想點(diǎn)擊后跳到網(wǎng)頁頂部，那么可以為該鏈接添加一個(gè)onclick事件，代碼是：
<a href='#' onclick='return false'>#空鏈接，點(diǎn)擊后停在當(dāng)前位置</a>
此外，還可以為該a標(biāo)簽綁定一個(gè)click監(jiān)聽事件，代碼這樣：
<a href="#" id="a"> #空鏈接，點(diǎn)擊后停在當(dāng)前位置 </a>
<script>
document.getElementById ("a").addEventListener("click", function (e) {
e.preventDefault();
return false;
}, false);
</script>
javascript:void(0)的返回值
使用javascript:void(0)時(shí)，它返回執(zhí)行腳本的值，并將顯示在瀏覽器中。執(zhí)行腳本的值來自void(0)這里，函數(shù) void 返回 null 的表達(dá)式，類似于沒有返回語句的函數(shù)；只返回 undefined，因此能夠?qū)⒋a注入<a>標(biāo)簽的 href 屬性。用戶可以運(yùn)行代碼，而無需瀏覽器運(yùn)行代碼來替換當(dāng)前頁面。
區(qū)別
href=""只會(huì)加載當(dāng)前頁面，同時(shí)href="#"將當(dāng)前頁面跳到頂部，而href="javascript:void(0)"什么都不做。
用標(biāo)簽的單擊事件處理程序返回 false 可實(shí)現(xiàn)與javascript:void(0)相同的效果。
<a>還可使用<a id="a-id" href="#">鏈接</a>，然后將事件處理程序綁定到單擊偵聽器上，從而防止點(diǎn)擊后跳到網(wǎng)頁頂部。
例如：
document.getElementById("a-id").onClick = function(){
return false;
};什么時(shí)候使用#而不是javascript:void(0)？
當(dāng)JavaScript被禁用時(shí)，仍然允許使用"#"，這樣的鏈接點(diǎn)擊后，頁面不會(huì)重新加載（點(diǎn)擊 href="" 的空鏈接時(shí)頁面會(huì)重新加載）。
當(dāng)使用錨鏈接時(shí)，<a href= "#">更干凈，超鏈接將誘使訪問者點(diǎn)擊它們，期望進(jìn)入新頁面或同一網(wǎng)頁中的網(wǎng)頁頂部。
javascript:{} 與 javascript:void(0)
空鏈接我們還見有人用javascript:{} ，測(cè)試發(fā)現(xiàn)，javascript:{} 與 void(0) 一樣，都是返回 undefined ，所以這兩種寫法其實(shí)沒有區(qū)別。
結(jié)論
當(dāng)你希望鏈接導(dǎo)航到頁面頂部時(shí)使用<a href="#" >，當(dāng)你希望頁面刷新而不在新選項(xiàng)卡上打開但確保事件偵聽器在函數(shù)上返回 false 以返回 undefined 的工作時(shí)使用Javascript:void(0);。
我想說兩個(gè)超鏈接都有自己的特殊情況，在某些情況下，兩者都可以以相同的方式執(zhí)行相同的事情。
不同之處在于javascript:void(0)在頁面上加載可能比<a href="#" >超鏈接花費(fèi)更長(zhǎng)的時(shí)間。
參考文章
相關(guān)文章
- 千萬別用 isNaN 判斷是否數(shù)字！
- 不能使用箭頭函數(shù)的6種情況
- 3種方法JS和jQuery判斷對(duì)象是否為空
- 3種方法JS判斷變量是否存在或已定義
- 3種方法判斷JS對(duì)象是否具有某一屬性
- $("body").on("click" 點(diǎn)擊body無反應(yīng)的原因
- jQuery為動(dòng)態(tài)按鈕、div、tr添加點(diǎn)擊(click)事件
- jquery each()方法遍歷一個(gè)列舉元素如Li標(biāo)簽的兩種寫法
- $.each()循環(huán)遍歷一維數(shù)組、二維數(shù)組、JSON數(shù)據(jù)和DOM元素
- jQuery $.each() 方法的5種使用方式
- 站長(zhǎng)推薦
