javascript:void(0)使用探討

更新時間：2013年08月27日 15:56:01 作者：

如果想做一個鏈接點擊后不做任何事情，或者響應點擊而完成其他事情一般都是設置屬性href = "#"其實還有比這更好的方法，下面為大家整理了幾種比較常見的解決方法，感興趣的朋友可以參考下

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

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

復制代碼代碼如下:

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

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

復制代碼代碼如下:

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

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

復制代碼代碼如下:

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

void是javascript的操作符，意思是：只執(zhí)行表達式，但沒有返回值，
void 操作符用法格式如下：

復制代碼代碼如下:

 
javascript:void (expression) 
javascript:void expression 

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

另外頁面會自動調(diào)回頂端，是因為"#"默認的瞄點位置是top，所以會出現(xiàn)這種情況。

您可能感興趣的文章: