主頁 > 優(yōu)化推廣 > 解決了一個(gè)小問題，希望對大家有幫助

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

發(fā)布時(shí)間：2010/10/18 14:32:33

我們經(jīng)常會(huì)用鏈接<a> 來代替 <button> 觸發(fā)onclick事件。
比如<a href="javascript: alert()">測試</a>
這樣做出現(xiàn)的結(jié)果就是：　執(zhí)行了alert()后，直接跳到了一個(gè)空頁面.因?yàn)閔tml本身對 <a>標(biāo)簽的href屬性做了處理，所以就會(huì)先執(zhí)行我們自己定義的方法，接著再運(yùn)行它自身的方法（跳轉(zhuǎn)的方法）。

那么以前我是怎么做的呢？我將代碼改為<a href = "#" onclick="alert()">，這樣就不會(huì)出現(xiàn)上述的問題了，這個(gè)是通過對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á)有限，如果覺得寫得不太清楚的，請大家運(yùn)行下面的例子，最后三個(gè)鏈接就是我剛剛講的三種情況，此例子在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> 是正解,加#也會(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)有這樣的問題，所以才有如上所說。

上一篇： javascript:void(0)

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

国产一区黄,国产夫妻一区,免费在线观看黄色小视频,日本黄色免费在线,久亚洲精品不子伦一区,日99久9在线免费,亚洲欧美日韩国产精品b站在线看

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

相關(guān)新聞推薦

石家莊網(wǎng)站建設(shè)的優(yōu)點(diǎn)

競價(jià)排名對SEO的影響

SEO網(wǎng)站優(yōu)化的八個(gè)步驟

国产一区黄,国产夫妻一区,免费在线观看黄色小视频,日本黄色免费在线,久亚洲精品不子伦一区,日99久9在线免费,亚洲欧美日韩国产精品b站在线看

解決了一個(gè)小問題，希望對大家有幫助

相關(guān)新聞推薦

石家莊網(wǎng)站建設(shè)的優(yōu)點(diǎn)

競價(jià)排名對SEO的影響

SEO網(wǎng)站優(yōu)化的八個(gè)步驟

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