|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
a標(biāo)簽空鏈接href=#與href=javascript:void(0)的區(qū)別
作者:admin 時(shí)間:2018-3-23 8:34:55 瀏覽:我們?cè)谑褂?a target="_blank" href="http://www.howtostagehomes.com/tutorial/html/tags/a%E6%A0%87%E7%AD%BE/">a標(biāo)簽的空鏈接時(shí)，通常寫為 href=# 或者 href=javascript:void(0) ，這兩種寫法有什么區(qū)別呢？我想很多人都不會(huì)去深究，但是這兩種寫法出來(lái)的效果有時(shí)候是不一樣的。
概括來(lái)說(shuō)，這兩種寫法有如下幾個(gè)區(qū)別：
- # 包含了一個(gè)位置信息，默認(rèn)的錨是
#top也就是網(wǎng)頁(yè)的上端。即是說(shuō)，當(dāng)href=#的空鏈接被點(diǎn)擊時(shí)，頁(yè)面會(huì)跳到最頂端。 - 而
javascript:void(0)僅僅表示一個(gè)死鏈接，當(dāng)href=javascript:void(0)的空鏈接被點(diǎn)擊時(shí)，頁(yè)面不會(huì)有任何反應(yīng)。 - 在頁(yè)面很長(zhǎng)的時(shí)候會(huì)使用 # 來(lái)定位頁(yè)面的具體位置，格式為：
# + id。 - 如果你要定義一個(gè)死鏈接請(qǐng)使用
javascript:void(0)。
下面實(shí)例代碼演示上述1、2點(diǎn)的區(qū)別：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a標(biāo)簽空鏈接href=#與href=javascript:void(0)的區(qū)別</title>
</head>
<body>
<p style="height:1300px;width:100%;background:#cccccc"></p>
<p style="width:100%;padding:10px;background:#999999">
<a href="#">空鏈接: href=#</a>
<br>
<a href="javascript:void(0)">空鏈接: href=javascript:void(0)</a>
</p>
<p style="height:100px;width:100%;background:#cccccc"></p>
</body>
</html>
使用 # 來(lái)定位頁(yè)面的具體位置的實(shí)例代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a標(biāo)簽空鏈接href=#與href=javascript:void(0)的區(qū)別</title>
</head>
<body>
<p style="width:100%;padding:10px;background:#999999">
<a href="#p1">跳到目標(biāo)位置: href=#p1</a>
</p>
<p style="height:100px;width:100%;background:#cccccc"></p>
<p id="p1" style="height:1000px;width:100%;padding:10px;background:#999999">目標(biāo)位置：id="p1" </p>
</body>
</html>
為什么要使用href=”javascript:void(0);”
為什么要使用href=”javascript:void(0);”，javascript:void(0) 什么時(shí)候使用？
href=”javascript:void(0);” 的含義是，讓超鏈接去執(zhí)行一個(gè)js函數(shù)，而不是去跳轉(zhuǎn)到一個(gè)地址，而void(0)表示一個(gè)空的方法，也就是不執(zhí)行js函數(shù)。
javascript:是偽協(xié)議，表示url的內(nèi)容通過(guò)javascript執(zhí)行。void(0)表示不作任何操作，這樣會(huì)防止鏈接跳轉(zhuǎn)到其他頁(yè)面。這么做往往是為了保留鏈接的樣式，但不讓鏈接執(zhí)行實(shí)際操作。下面的語(yǔ)句：
<a href="javascript:void(0)" onclick="window.open()">
點(diǎn)擊鏈接后，頁(yè)面不動(dòng)，只打開鏈接。而下面的語(yǔ)句：
<a href="#" onclick="javascript:return false;">
作用一樣，但不同瀏覽器會(huì)有差異。
多數(shù)情況下，當(dāng)某一鏈接要執(zhí)行一個(gè)javascript程序時(shí)，我們可以使用href=javascript:void(0)再加上onclick事件來(lái)實(shí)現(xiàn)，如下面實(shí)例代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a標(biāo)簽空鏈接href=#與href=javascript:void(0)的區(qū)別</title>
</head>
<body>
<p style="width:100%;padding:10px;background:#999999">
<a href=javascript:void(0) onclick=func()>點(diǎn)擊執(zhí)行函數(shù)func()</a>
</p>
<script>
function func(){
alert("ok");
}
</script>
</body>
</html>
javascript:;與javascript:void(0)的理解
void運(yùn)算符
簡(jiǎn)介：
void 是 javascript 的操作符，意思是：只執(zhí)行表達(dá)式，但沒(méi)有返回值。該表達(dá)式會(huì)被計(jì)算但是不會(huì)在當(dāng)前文檔處裝入任何內(nèi)容，例如，void(0) 計(jì)算為 0 ，但在JavaScript上沒(méi)有任何效果，也就是說(shuō) <a href="javascript：void(0)"> 的作用和 <a href="javascript：void(1)"> 的作用是一樣的。
void 操作符用法格式如下：
javascript：void (表達(dá)式) //推薦此寫法
javascript：void 表達(dá)式
點(diǎn)擊鏈接的操作
做頁(yè)面時(shí)，如果想做一個(gè)鏈接點(diǎn)擊后不做任何事情，或者響應(yīng)點(diǎn)擊而完成其他事情，例如點(diǎn)擊鏈接后不做任何事情，代碼如下：
<a href="#" >test</a> //點(diǎn)擊鏈接，頁(yè)面默認(rèn)上滾到頁(yè)的頂部，但可以加上 onclick="return false"，防止上滾到頁(yè)的頂部
<a href="####" >test</a> //使用2個(gè)到4個(gè)#，見(jiàn)的大多是"####"，也有使用"#all"等其他的。默認(rèn)不上滾到頁(yè)的頂部
<a href="javascript：void(0);" >test</a> //新浪微博寫法，javascript:void(0) 僅僅表示一個(gè)死鏈接，執(zhí)行空事件
<a href="javascript：;" >test</a> //QQ空間寫法
點(diǎn)擊鏈接后，響應(yīng)用戶自定義的點(diǎn)擊事件
<a href="javascript：void(0)" onclick="func()">test</a> //其中func() 是 javascript 方法，即函數(shù)
<a href="#" onclick="func();return false;"> //什么問(wèn)題都解決了,包括瀏覽器不兼容問(wèn)題</a> 或者直接使用href=""
<a href="#" onclick="alert();event.returnValue=false;">test</a>
ajax 之 void(0)
在 Ajax 中，都會(huì)常見(jiàn)如下的代碼：
<a href="javascript:doTest2();void(0);">here</a>
但這里的void(0)究竟是何含義呢？
Javascript中void是一個(gè)操作符，該操作符指定要計(jì)算一個(gè)表達(dá)式但是不返回值。
在 Ajax 的頁(yè)面，實(shí)現(xiàn)的是無(wú)刷新操作，使用 void(0)也 比較多?？匆幌翧jax的web頁(yè)面的話，一般都會(huì)看到有很多的void(0)，所以在使用void(0)之前，好先想一想，這個(gè)頁(yè)面是否需要整體刷新。
href="#" 的情況處理
做頁(yè)面時(shí)，如果是個(gè)# ，就會(huì)出現(xiàn)跳到頂部的情況,個(gè)人收藏的幾種解決方法，其中，"＃" 包含了一個(gè)位置信息，默認(rèn)的錨點(diǎn)是＃top 也就是網(wǎng)頁(yè)的上端。
<a href="####"></a>
<a href="javascript:void(0)"></a>
<a href="javascript:void(null)"></a>
<a href="#" onclick="return false"></a>
<span style="cursor:hand"></span>(好像在FF中不能顯示)
相關(guān)文章
- 站長(zhǎng)推薦
