服務熱線
153 8323 9821
我們經常會用鏈接<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>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="javascript:alert()" >test</a> </p>
<p>
<a href="#" onclick="alert();event.returnValue=false;">test</a> </p>
</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="#">,而且一直沒有發現有 滾動條會跳上去的 問題, 今天才發現有這樣的問題,所以才有如上所說。
下一篇:C#.Net上傳文件大小限制設置