A標(biāo)簽觸發(fā)onclick事件而不跳轉(zhuǎn)的多種解決方法
更新時(shí)間:2013年06月27日 17:52:53 作者:
一個標(biāo)簽僅僅是要觸發(fā)onclick行為,遇到了A標(biāo)簽觸發(fā)onclick事件時(shí)不執(zhí)行跳轉(zhuǎn),下面與大家分享下四種解決方法,感興趣的朋友可以參考下哈
在web頁面開發(fā)時(shí),我們經(jīng)常會遇到下列情況:
1.一個標(biāo)簽僅僅是要觸發(fā)onclick行為;
2.表現(xiàn)上要有鼠標(biāo)的pointer指針顯示,或者其他類似a標(biāo)簽的視覺效果。
比如執(zhí)行刪除操作時(shí),為了避免誤操作,我們要彈出對話框讓用戶確定是否刪除。因此我們經(jīng)常會用鏈接<a></a>形式代替<button> 觸發(fā)onclick事件。
代碼如下:
<script type="text/javascript">
function del(){
if(confirm("確定刪除該記錄?")){
parent.window.location="執(zhí)行刪除.jsp";
return true;
}
return false;
}
</script>
<a href="" target="mainFrame" class="STYLE4" onclick="del()" >刪除</a>
這樣做的后果是js代碼會跳轉(zhuǎn)到"執(zhí)行刪除.jsp"頁面,而<a>標(biāo)簽也會跳轉(zhuǎn)打開一個空頁面。因?yàn)閔tml本身對 <a>標(biāo)簽的href屬性做了處理,所以就會先執(zhí)行我們自己定義的方法,接著再運(yùn)行它自身的方法(跳轉(zhuǎn)的方法)。
解決方法主要有四種,如下:
1. 不用a標(biāo)簽,設(shè)定css或用js來表現(xiàn)(有點(diǎn)復(fù)雜);
2. 用a標(biāo)簽,onclick屬性或onclick事件中返回false;(個人喜歡)
如:<a href="" target="mainFrame" class="STYLE4" onclick="del();return false" >刪除</a>
這是個執(zhí)行順序的問題,<a>這個標(biāo)簽的執(zhí)行順序應(yīng)該是先執(zhí)行onclick 的腳本,最后才進(jìn)行href參數(shù)指定頁面的跳轉(zhuǎn)。在onclick中返回false,就可以中止<a>標(biāo)簽的工作流程,也就是不讓頁面跳轉(zhuǎn)到href參數(shù)指定的頁面。
3. 用href="javascript:void(0)"這種偽協(xié)議;(這種偽協(xié)議,少寫的好)
即:<a href="javascript:void(0)" target="mainFrame" class="STYLE4" onclick="del()" >刪除</a>
4. <a href="#" class="STYLE4" onclick="del()" >刪除</a>。(總是跳轉(zhuǎn)到當(dāng)前頁面頂部,當(dāng)頁面內(nèi)容較多時(shí),還是會有跳轉(zhuǎn)的感覺)
1.一個標(biāo)簽僅僅是要觸發(fā)onclick行為;
2.表現(xiàn)上要有鼠標(biāo)的pointer指針顯示,或者其他類似a標(biāo)簽的視覺效果。
比如執(zhí)行刪除操作時(shí),為了避免誤操作,我們要彈出對話框讓用戶確定是否刪除。因此我們經(jīng)常會用鏈接<a></a>形式代替<button> 觸發(fā)onclick事件。
代碼如下:
復(fù)制代碼 代碼如下:
<script type="text/javascript">
function del(){
if(confirm("確定刪除該記錄?")){
parent.window.location="執(zhí)行刪除.jsp";
return true;
}
return false;
}
</script>
<a href="" target="mainFrame" class="STYLE4" onclick="del()" >刪除</a>
這樣做的后果是js代碼會跳轉(zhuǎn)到"執(zhí)行刪除.jsp"頁面,而<a>標(biāo)簽也會跳轉(zhuǎn)打開一個空頁面。因?yàn)閔tml本身對 <a>標(biāo)簽的href屬性做了處理,所以就會先執(zhí)行我們自己定義的方法,接著再運(yùn)行它自身的方法(跳轉(zhuǎn)的方法)。
解決方法主要有四種,如下:
1. 不用a標(biāo)簽,設(shè)定css或用js來表現(xiàn)(有點(diǎn)復(fù)雜);
2. 用a標(biāo)簽,onclick屬性或onclick事件中返回false;(個人喜歡)
如:<a href="" target="mainFrame" class="STYLE4" onclick="del();return false" >刪除</a>
這是個執(zhí)行順序的問題,<a>這個標(biāo)簽的執(zhí)行順序應(yīng)該是先執(zhí)行onclick 的腳本,最后才進(jìn)行href參數(shù)指定頁面的跳轉(zhuǎn)。在onclick中返回false,就可以中止<a>標(biāo)簽的工作流程,也就是不讓頁面跳轉(zhuǎn)到href參數(shù)指定的頁面。
3. 用href="javascript:void(0)"這種偽協(xié)議;(這種偽協(xié)議,少寫的好)
即:<a href="javascript:void(0)" target="mainFrame" class="STYLE4" onclick="del()" >刪除</a>
4. <a href="#" class="STYLE4" onclick="del()" >刪除</a>。(總是跳轉(zhuǎn)到當(dāng)前頁面頂部,當(dāng)頁面內(nèi)容較多時(shí),還是會有跳轉(zhuǎn)的感覺)
相關(guān)文章
JS實(shí)現(xiàn)直接運(yùn)行html代碼的方法
這篇文章主要介紹了JS實(shí)現(xiàn)直接運(yùn)行html代碼的方法,涉及javascript窗口操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03
JavaScript實(shí)現(xiàn)Date()日期格式化的3種常用方法
Date()日期對象是一個構(gòu)造函數(shù),必須使用new來調(diào)用創(chuàng)建我們的日期對象,下面這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)Date()日期格式化的3種常用方法,需要的朋友可以參考下2024-05-05
layui加載數(shù)據(jù)顯示loading加載完成loading消失的實(shí)例代碼
今天小編就為大家分享一篇layui加載數(shù)據(jù)顯示loading加載完成loading消失的實(shí)例代碼,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
帶大家了解一下JavaScript常見的五個內(nèi)存錯誤
這篇文章主要為大家介紹了JavaScript常見的五個內(nèi)存錯誤,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-01-01
javascript 動態(tài)創(chuàng)建表格
這篇文章主要介紹了javascript 動態(tài)創(chuàng)建表格,需要的朋友可以參考下2015-01-01
JS 循環(huán)li添加點(diǎn)擊事件 (閉包的應(yīng)用)
這篇文章主要介紹了js循環(huán)li添加點(diǎn)擊事件 (閉包的應(yīng)用)的相關(guān)資料,非常不錯,具有參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12
JavaScript監(jiān)聽觸摸事件代碼實(shí)例
這篇文章主要介紹了JavaScript監(jiān)聽觸摸事件代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12

