a標(biāo)簽調(diào)用js的方法總結(jié)
a標(biāo)簽點(diǎn)擊事件方法匯總
<a> 標(biāo)簽的 href 屬性用于指定超鏈接目標(biāo)的 URL,href 屬性的值可以是任何有效文檔的相對(duì)或絕對(duì) URL,包括片段標(biāo)識(shí)符和 JavaScript 代碼段。
這里的href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" ,其中javascript:是偽協(xié)議,它可以讓我們通過(guò)一個(gè)鏈接來(lái)調(diào)用javascript函數(shù).而采用這個(gè)方式
javascript:;可以實(shí)現(xiàn)A標(biāo)簽的點(diǎn)擊事件運(yùn)行時(shí),如果頁(yè)面內(nèi)容很多,有滾動(dòng)條時(shí),頁(yè)面不會(huì)亂跳,用戶體驗(yàn)更好。
1. a href="javascript:js_method();" rel="external nofollow" rel="external nofollow"
這是平臺(tái)上常用的方法,但是這種方法在傳遞this等參數(shù)的時(shí)候很容易出問(wèn)題,而且javascript:協(xié)議作為a的href屬性的時(shí)候不僅會(huì)導(dǎo)致不必要的觸發(fā)window.onbeforeunload事件,在IE里面更會(huì)使gif動(dòng)畫(huà)圖片停止播放。W3C標(biāo)準(zhǔn)不推薦在href里面執(zhí)行
javascript語(yǔ)句
2. a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" onclick="js_method()"
這種方法是很多網(wǎng)站最常用的方法,也是最周全的方法,onclick方法負(fù)責(zé)執(zhí)行js函數(shù),而void是一個(gè)操作符,void(0)返回undefined,地址不發(fā)生跳轉(zhuǎn)。而且這種方法不會(huì)像第一種方法一樣直接將js方法暴露在瀏覽器的狀態(tài)欄。
3.a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method()"
這種方法跟跟2種類似,區(qū)別只是執(zhí)行了一條空的js代碼。
4.a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method()"
這種方法也是網(wǎng)上很常見(jiàn)的代碼,#是標(biāo)簽內(nèi)置的一個(gè)方法,代表top的作用。所以用這種方法點(diǎn)擊后網(wǎng)頁(yè)后返回到頁(yè)面的最頂端。
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 如果頁(yè)面有滾動(dòng)條 點(diǎn)擊后網(wǎng)頁(yè)后返回到頁(yè)面的最頂端
5.a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method();return false;"
這種方法點(diǎn)擊執(zhí)行了js函數(shù)后return false,頁(yè)面不發(fā)生跳轉(zhuǎn),執(zhí)行后還是在頁(yè)面的當(dāng)前位置。
我看了下taobao的主頁(yè),他們采用的是第2種方法,而alibaba的主頁(yè)是采用的第1種方法,和我們的區(qū)別是每個(gè)href里的javascript方法都用try、catch包圍。
綜合上述,在a中調(diào)用js函數(shù)最適當(dāng)?shù)姆椒ㄍ扑]使用:
- a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" onclick="js_method()"
- a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method()"
- a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method();return false;" 我們常用的在a標(biāo)簽中有點(diǎn)擊事件:
- a href="javascript:js_method();" rel="external nofollow" rel="external nofollow"
以上就是關(guān)于a標(biāo)簽調(diào)用js的全部知識(shí)點(diǎn)內(nèi)容,感謝大家對(duì)腳本之家的支持。
相關(guān)文章
JavaScript動(dòng)態(tài)修改彈出窗口大小的方法
這篇文章主要介紹了JavaScript動(dòng)態(tài)修改彈出窗口大小的方法,涉及javascript中window.open方法的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
js+css簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁(yè)換膚效果
這篇文章主要介紹了js+css簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁(yè)換膚效果的方法,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)遍歷及修改頁(yè)面元素樣式的相關(guān)技巧,需要的朋友可以參考下2015-12-12
JavaScript拆分字符串時(shí)產(chǎn)生空字符的解決方案
使用JavaScript的split方法拆分字符串時(shí)出現(xiàn)一些空字符串"",尤其是當(dāng)使用正則表達(dá)式作為分隔符的時(shí)候。那么,產(chǎn)生這些空字符串的原因是什么?又該如何來(lái)處理呢,這就是今天我們要探討的問(wèn)題2014-09-09
layui左側(cè)菜單欄鼠標(biāo)懸停顯示菜單文字功能實(shí)現(xiàn)
layui封裝的左側(cè)菜單是固定寬度的,且左側(cè)菜單欄在css里改變寬度,效果并不是很好(還設(shè)計(jì)頭部菜單欄),如果寫js來(lái)讓菜單欄能夠拉伸,也比較麻煩,那怎么最簡(jiǎn)單的,讓用戶看到菜單的文字呢,下面給大家分享layui左側(cè)菜單欄鼠標(biāo)懸停顯示菜單文字功能實(shí)現(xiàn),感興趣的朋友一起看看吧2024-06-06
xml 與javascript結(jié)合的問(wèn)題解決方法
xml 與javascript結(jié)合的問(wèn)題解決方法...2007-03-03

