IE6下javascript:void(0)的詭異

 

IE6下<a href="#">與<a href="javascript:void(0);">的區別

JavaScriptAjaxIEFirefoxHTML.之前在項目,用到超鏈接,在ie下沒有問題,但是到了ie6,居然發現點擊事件不起作用, 真不可思議,以前都沒注意到,後來網上搜了下,問題就出在這個void(0)上!現把網上的資料整理了下。

Html代碼 
1.<a href=”javaScript:void(0)” onClick=”doSomething();”>doSomethind</a> 
<a href=”javaScript:void(0)” onClick=”doSomething();”>doSomethind</a>

讓我們先來看看JavaScript中void(0)的含義:
JavaScript中void是一個操作符,該操作符指定要計算一個表達式但是不返回值。

void 操作符用法格式如下:

Html代碼 
1.javascript:void (expression)  
2.javascript:void expression 
javascript:void (expression)
javascript:void expression

expression是一個要計算的 JavaScript 標準的表達式。表達式外側的圓括號是可選的,但是寫上去是一個好習慣。我們可以使用 void 操作符指定超級鏈接。表達式會被計算但是不會在當前文檔處裝入任何內容。面的代碼創建了一個超級鏈接,當用戶點擊以後不會發生任何事。當用戶點擊鏈接時,void(0) 計算爲 0,但在 JavaScript 上沒有任何效果。

Html代碼 
1.<a href=”javascript:void(0)”>單擊此處什麼也不會發生</a> 
<a href=”javascript:void(0)”>單擊此處什麼也不會發生</a>

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

Html代碼 
1.<a href=”javascript:void(document.form.submit())”> 
<a href=”javascript:void(document.form.submit())”>

其實我們可以用上面的代碼,這句話會進行一次submit操作。那什麼情況下用void(0)比較多呢,無刷新,當然是Ajax了,看一下Ajax的web頁面的話,一般都會看到有很多的void(0),:D 所以在使用void(0)之前,最好先想一想,這個頁面是否需要整體刷新。

 


Html代碼 
1.<script type="text/javascript">     
2.    function goUrl(x){     
3.        window.location.href=x;     
4.    }     
5.</script>     
6. 
7.<a href="javascript:;" onclick="javascript:goUrl('http://www.sina.com');">跳轉1</a> 
8.     
9.<a href="javascript:void(0);" onclick="javascript:goUrl('http://www.sina.com');">跳轉2</a> 
10.     
11.<a href="javascript:void(0);" onclick="javascript:goUrl('http://www.sina.com');return false;">跳轉3</a>     
12. 
13.<a href="#" onclick="javascript:goUrl('http://www.sina.com');">跳轉4</a>     
14. 
15.<a href="###" onclick="javascript:goUrl('http://www.sina.com');">跳轉5</a>   
<script type="text/javascript">  
    function goUrl(x){  
        window.location.href=x;  
    }  
</script>  

<a href="javascript:;" onclick="javascript:goUrl('http://www.sina.com');">跳轉1</a>
  
<a href="javascript:void(0);" onclick="javascript:goUrl('http://www.sina.com');">跳轉2</a>
  
<a href="javascript:void(0);" onclick="javascript:goUrl('http://www.sina.com');return false;">跳轉3</a>  

<a href="#" onclick="javascript:goUrl('http://www.sina.com');">跳轉4</a>  

<a href="###" onclick="javascript:goUrl('http://www.sina.com');">跳轉5</a> 

測試環境IE6,IE7,Firefox 3。

跳轉1和2在IE6環境下無效,3、4、5在IE6,IE7,Firefox3.01下測試均能 通過,。

跳轉4和5最簡潔。

關鍵在於<a>的href屬性,空鏈接用"#","###"。

爲了不返回網頁頂端。

空鏈接推薦用"###"。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章