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

