javascript:void(0)和javascript:;的用法


一、JavaScript:void(0)

我們經常會使用到 javascript:void(0) 這樣的代碼,那么在 JavaScript 中 javascript:void(0) 代表的是什么意思呢?

javascript:void(0) 中最關鍵的是 void 關鍵字, void 是 JavaScript 中非常重要的關鍵字,該操作符指定要計算一個表達式但是不返回值。

JavaScript中void是一個操作符,該操作符指定要計算一個表達式但是不返回值。
void 操作符用法格式如下:
1. javascript:void (expression)
2. javascript:void expression

expression是一個要計算的 JavaScript 標准的表達式。表達式外側的圓括號是可選的,但是寫上去是一個好習慣。

我們可以使用void 操作符指定超級鏈接。表達式會被計算但是不會在當前文檔處裝入任何內容。

下面的代碼創建了一個超級鏈接,當用戶點擊以后不會發生任何事。當用戶點擊鏈接時,void(0) 計算為 0,但在 JavaScript 上沒有任何效果。

<a href="javascript:void(0)">單擊此處什么也不會發生</a>

也就是說,要執行某些處理,但是不整體刷新頁面的情況下,可以使用void(0),但是在需要對頁面進行refresh的情況下,那就要仔細了。

下面的代碼創建了一個超級鏈接,用戶單擊時會提交表單。

<a href="javascript:void(document.form.submit())">單此處提交表單</a>

其實我們可以這樣用<a href="javascript:void(document.form.submit())">,這句話會進行一次submit操作。那什么情況下用void(0)比較多呢,無刷新,當然是Ajax了,看一下Ajax的web頁面的話,一般都會看到有很多的void(0),所以在使用void(0)之前,最好先想一想,這個頁面是否需要整體刷新。

二、<a>標簽中href="javascript:;"

<a> 標簽的 href 屬性用於指定超鏈接目標的 URL,href 屬性的值可以是任何有效文檔的相對或絕對 URL,包括片段標識符和 JavaScript 代碼段。

這里的href="javascript:;",其中 javascript:是偽協議,它可以讓我們通過一個鏈接來調用javascript函數.而采用這個方式 javascript:;可以實現A標簽的點擊事件運行時,如果頁面內容很多,有滾動條時,頁面不會亂跳,用戶體驗更好。
 
javascript:是表示在觸發<a>默認動作時,執行一段JavaScript代碼,而 javascript:; 表示什么都不執行,這樣點擊<a>時就沒有任何反應。
javascript:;表示這是一個空連接。點擊之后沒任何反應。
類似的是#,但是一個#點擊之后頁面很長的情況下會會滾到頂部;而javascript:;沒這樣的問題;
當然###這樣的效果就跟javascript:;一樣了

三、href="#"與href="javascript:void(0)"的區別

# 包含了一個位置信息,默認的錨是#top 也就是網頁的上端。

javascript:void(0), 僅僅表示一個死鏈接。

在頁面很長的時候會使用 # 來定位頁面的具體位置,格式為:# + id

如果你要定義一個死鏈接請使用 javascript:void(0) 。


在做頁面時,如果想做一個鏈接點擊后不做任何事情,或者響應點擊而完成其他事情,可以設置其屬性 href = "#",但是,這樣會有一個問題,就是當頁面有滾動條時,點擊后會返回到頁面頂端,用戶體驗不好。 

目前有如下幾種解決辦法: 
1)點擊鏈接后不做任何事情 

  1. 1.<a href="javascript:void(0);" >test</a>   
  2. 2.<a href="javascript:;" >test</a>   
  3. 3.<a href="####" >test</a> //使用2個到4個#,見的大多是"####",也有使用"#all"等其他的  


2)點擊鏈接后,響應用戶自定義的點擊事件 

  1. 1.<a href="javascript:void(0)" onclick="doSomething()">test</a>   
  2. 2.<a href="#" onclick="doSomething();return false;">什么問題都解決了,包括瀏覽器不兼容問題</a> //或者直接使用href=""   
  3. 3.<a href="#" onclick="alert();event.returnValue=false;">test</a>  


說明: 
1.javascript:void(0)這種偽協議,少寫的好,如果你看過一些web標准的書就知道為什么了。(不懂,原話摘的,暫做記錄) 
2.鏈接(href)直接使用javascript:void(0)在IE中可能會引起一些問題,比如:造成gif動畫停止播放等,所以,最安全的辦法還是使用“####”。為防止點擊鏈接后跳轉到頁首,onclick事件return false即可。 
3.如果僅僅是想鼠標移過,變成手形,可以使用 

    1. <span style="cursor:pointer" onclick="foo()">Click Me!</span>   

 

void是javascript的操作符,意思是:只執行表達式,但沒有返回值, 
void 操作符用法格式如下: 

  1. 1. javascript:void (expression)   
  2. 2. javascript:void expression   


為了程序風格良好,建議使用第二種帶上括號的 
我們可以使用void操作符指定超級鏈接,如javascript:void(document.form.submit())。表達式會被計算但是不會在當前文檔處裝入任何內容,void(0)計算為0,但在JavaScript上沒有任何效果,也就是說 <a href="javascript:void(0)">的效果同<a href="javascript:void(1)">的效果是一樣的。 
關鍵是只要知道void是javascipt自身的操作符,它表示的是只執行表達式,但沒有返回值! 

另外頁面會自動調回頂端,是因為"#"默認的瞄點位置是top,所以會出現這種情況。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM