解決了一個小問題，希望對大家有幫助

發布時間：2010/10/18 14:32:33

我們經常會用鏈接<a> 來代替 <button> 觸發onclick事件。
比如<a href="javascript: alert()">測試</a>
這樣做出現的結果就是：　執行了alert()后，直接跳到了一個空頁面.因為html本身對 <a>標簽的href屬性做了處理，所以就會先執行我們自己定義的方法，接著再運行它自身的方法（跳轉的方法）。

那么以前我是怎么做的呢？我將代碼改為<a href = "#" onclick="alert()">，這樣就不會出現上述的問題了，這個是通過對href屬性的了解，只要賦給href=“#”，那么它便不會跳到空頁面。我本以為這樣的問題已經解決了，
想不到這種寫法也有個問題，就是當頁面出現垂直滾動條的時候，比如你的鏈接是在頁面最底端，你需要將滾動條拉下才能看到此鏈接，你點擊鏈接，就會先執行alert()，這個時候滾動條會自動拉上去到頁面頂端，這給使用系統的客戶造成了很大的不方便，由于頁面自動往頂端跳，用戶又要下拉滾動條來操作。這個說明執行了alert()方法后，瀏覽器自身也執行了自己的方法。

這樣考慮之后，現在的做法是 <a href="" onclick = "alert();event.returnValue=false"/>,瀏覽器也是要響應這個事件，那么我們將這個事件停止傳播了，自然也就沒上面的問題了，當然event.returnValue只是IE的特有，如果要兼容firefox,mozilla ，可能需要考慮兼容性的編碼了，但這不是表達的重點.
所以在平時的頁面設計中，最好都是用button來響應onclick事件，如果有涉及到鏈接的，希望我這種做法能給大家帶來幫助。

語言表達有限，如果覺得寫得不太清楚的，請大家運行下面的例子，最后三個鏈接就是我剛剛講的三種情況，此例子在IE6.0是通過的。
<BODY>

<a href="#" onclick="alert()">test</a> 

<a href="#" onclick="alert()">test</a> 

<a href="#" onclick="alert()">test</a> 

<a href="#" onclick="alert()">test</a> 


<a href="#" onclick="alert()">test</a> 

<a href="#" onclick="alert()">test</a> 

<a href="#" onclick="alert()">test</a> 

<a href="#" onclick="alert()">test</a> 


<a href="#" onclick="alert()">test</a> 

<a href="#" onclick="alert()">test</a> 

<a href="#" onclick="alert()">test</a> 

<a href="#" onclick="alert()">test</a> 


<a href="#" onclick="alert()">test</a> 

<a href="#" onclick="alert()">test</a> 

<a href="javascript:alert()" >test</a> 

<a href="#" onclick="alert();event.returnValue=false;">test</a> 
</BODY>

其他人回答:

<a href="javascript:void(0)" onclick="something()" >test</a> 是正解,加#也會亂跳的

囧，你就不能onclick="something();return false"啊……

javascript:void(0)這種偽協議，少寫的好，如果你看過一些web標準的書就知道為什么了。

總結一下，如果在實際應用中確實是要用到<a>標簽來響應onclick事件的。
那么就建議使用下面三種方法
1.<a href="javascript:void(0)" onclick="doSomething()">test</a>
2.<a href="" onclick="doSomething();return false">test</a>
3.<a href="" onclick="doSomething();event.returnValue=false">test</a>

其實，我發這個帖子的主要目的是，我以前一直都習慣用 <a href="#">,而且一直沒有發現有滾動條會跳上去的問題，今天才發現有這樣的問題，所以才有如上所說。

上一篇： javascript:void(0)

下一篇： C#.Net上傳文件大小限制設置

解決了一個小問題，希望對大家有幫助

相關新聞推薦

石家莊網站建設的優點

競價排名對SEO的影響

SEO網站優化的八個步驟