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

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

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

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

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

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

語(yǔ)言表達(dá)有限，如果覺(jué)得寫(xiě)得不太清楚的，請(qǐng)大家運(yùn)行下面的例子，最后三個(gè)鏈接就是我剛剛講的三種情況，此例子在IE6.0是通過(guò)的。
<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é)議，少寫(xiě)的好，如果你看過(guò)一些web標(biāo)準(zhǔn)的書(shū)就知道為什么了。

總結(jié)一下，如果在實(shí)際應(yīng)用中確實(shí)是要用到<a>標(biāo)簽來(lái)響應(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="#">,而且一直沒(méi)有發(fā)現(xiàn)有滾動(dòng)條會(huì)跳上去的問(wèn)題，今天才發(fā)現(xiàn)有這樣的問(wèn)題，所以才有如上所說(shuō)。

上一篇： javascript:void(0)

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

蜜桃欧美|戒汤唯未删减版|先锋影音av资源在线观看|国产精品裸体一区二区三区,这么多年电影完整版免费在线观看,卧底2020电视剧免费全集在线观看,美好事物电影完整版在线观看

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

相關(guān)新聞推薦

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

競(jìng)價(jià)排名對(duì)SEO的影響

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