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