javascript:void(0)的問題

來源:互聯網
上載者:User

最近看了好幾個關於<a>標籤和javascript:void(0)的文章,謹記於此,以資查閱。 
註:以下代碼未經全面測試,但每一種方法可能會出現的情況都基本做了說明。 

在做頁面時,如果想做一個連結點擊後不做任何事情,或者響應點擊而完成其他事情,可以設定其屬性 href = "#",但是,這樣會有一個問題,就是當頁面有捲軸時,點擊後會返回到頁面頂端,使用者體驗不好。 

目前有如下幾種解決辦法: 
1)點選連結後不做任何事情 

Java代碼
  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)點選連結後,響應使用者自訂的點擊事件 

Java代碼
  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.如果僅僅是想滑鼠移過,變成手形,可以使用 

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

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

Java代碼
  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,所以會出現這種情況。 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.