服務(wù)熱線
153 8323 9821
咨詢熱線 ：
15383239821
我們經(jīng)常會(huì)用鏈接<a> 來代替 <button> 觸發(fā)onclick事件。
比如<a href="javascript: alert()">測試</a>
這樣做出現(xiàn)的結(jié)果就是： 執(zhí)行了alert()后，直接跳到了一個(gè)空頁面.因?yàn)閔tml本身對(duì) <a>標(biāo)簽的href屬性做了處理，所以就會(huì)先執(zhí)行我們自己定義的方法，接著再運(yùn)行它自身的方法（跳轉(zhuǎn)的方法）。
那么以前我是怎么做的呢？ 我將代碼改為<a href = "#" onclick="alert()">，這樣就不會(huì)出現(xiàn)上述的問題了，這個(gè)是通過對(duì)href屬性的了解，只要賦給href=“#”，那么它便不會(huì)跳到空頁面。 我本以為這樣的問題已經(jīng)解決了，
想不到這種寫法也有個(gè)問題，就是當(dāng)頁面出現(xiàn)垂直滾動(dòng)條的時(shí)候，比如你的鏈接是在頁面最底端，你需要將滾動(dòng)條拉下才能看到此鏈接，你點(diǎn)擊鏈接，就會(huì)先執(zhí)行alert()，這個(gè)時(shí)候滾動(dòng)條會(huì)自動(dòng)拉上去到頁面頂端，這給使用系統(tǒng)的客戶造成了很大的不方便，由于頁面自動(dòng)往頂端跳，用戶又要下拉滾動(dòng)條來操作。這個(gè)說明執(zhí)行了alert()方法后，瀏覽器自身也執(zhí)行了自己的方法。
這樣考慮之后，現(xiàn)在的做法是 <a href="" onclick = "alert();event.returnValue=false"/>,瀏覽器也是要響應(yīng)這個(gè)事件，那么我們將這個(gè)事件停止傳播了，自然也就沒上面的問題了，當(dāng)然event.returnValue只是IE的特有，如果要兼容firefox,mozilla ，可能需要考慮兼容性的編碼了，但這不是表達(dá)的重點(diǎn).
所以在平時(shí)的頁面設(shè)計(jì)中，最好都是用button來響應(yīng)onclick事件，如果有涉及到鏈接的，希望我這種做法能給大家?guī)韼椭?
語言表達(dá)有限，如果覺得寫得不太清楚的，請(qǐng)大家運(yùn)行下面的例子，最后三個(gè)鏈接就是我剛剛講的三種情況，此例子在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> 是正解,加#也會(huì)亂跳的
囧，你就不能onclick="something();return false"啊……
javascript:void(0)這種偽協(xié)議，少寫的好，如果你看過一些web標(biāo)準(zhǔn)的書就知道為什么了。
總結(jié)一下，如果在實(shí)際應(yīng)用中確實(shí)是要用到<a>標(biāo)簽來響應(yīng)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>
其實(shí)，我發(fā)這個(gè)帖子的主要目的是，我以前一直都習(xí)慣用 <a href="#">,而且一直沒有發(fā)現(xiàn)有 滾動(dòng)條會(huì)跳上去的 問題， 今天才發(fā)現(xiàn)有這樣的問題，所以才有如上所說。
