A標(biāo)簽觸發(fā)onclick事件而不跳轉(zhuǎn)的多種解決方法
更新時(shí)間：2013年06月27日 17:52:53 作者：
一個(gè)標(biāo)簽僅僅是要觸發(fā)onclick行為，遇到了A標(biāo)簽觸發(fā)onclick事件時(shí)不執(zhí)行跳轉(zhuǎn)，下面與大家分享下四種解決方法，感興趣的朋友可以參考下哈
在web頁(yè)面開(kāi)發(fā)時(shí)，我們經(jīng)常會(huì)遇到下列情況：
1.一個(gè)標(biāo)簽僅僅是要觸發(fā)onclick行為；
2.表現(xiàn)上要有鼠標(biāo)的pointer指針顯示,或者其他類(lèi)似a標(biāo)簽的視覺(jué)效果。
比如執(zhí)行刪除操作時(shí)，為了避免誤操作，我們要彈出對(duì)話(huà)框讓用戶(hù)確定是否刪除。因此我們經(jīng)常會(huì)用鏈接<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代碼會(huì)跳轉(zhuǎn)到"執(zhí)行刪除.jsp"頁(yè)面，而<a>標(biāo)簽也會(huì)跳轉(zhuǎn)打開(kāi)一個(gè)空頁(yè)面。因?yàn)閔tml本身對(duì) <a>標(biāo)簽的href屬性做了處理，所以就會(huì)先執(zhí)行我們自己定義的方法，接著再運(yùn)行它自身的方法（跳轉(zhuǎn)的方法）。
解決方法主要有四種，如下：
1. 不用a標(biāo)簽,設(shè)定css或用js來(lái)表現(xiàn)（有點(diǎn)復(fù)雜）；
2. 用a標(biāo)簽,onclick屬性或onclick事件中返回false；(個(gè)人喜歡)
如：<a href="" target="mainFrame" class="STYLE4" onclick="del();return false" >刪除</a>
這是個(gè)執(zhí)行順序的問(wèn)題，<a>這個(gè)標(biāo)簽的執(zhí)行順序應(yīng)該是先執(zhí)行onclick 的腳本，最后才進(jìn)行href參數(shù)指定頁(yè)面的跳轉(zhuǎn)。在onclick中返回false，就可以中止<a>標(biāo)簽的工作流程，也就是不讓頁(yè)面跳轉(zhuǎn)到href參數(shù)指定的頁(yè)面。
3. 用href="javascript:void(0)"這種偽協(xié)議；（這種偽協(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)前頁(yè)面頂部，當(dāng)頁(yè)面內(nèi)容較多時(shí)，還是會(huì)有跳轉(zhuǎn)的感覺(jué)）
1.一個(gè)標(biāo)簽僅僅是要觸發(fā)onclick行為；
2.表現(xiàn)上要有鼠標(biāo)的pointer指針顯示,或者其他類(lèi)似a標(biāo)簽的視覺(jué)效果。
比如執(zhí)行刪除操作時(shí)，為了避免誤操作，我們要彈出對(duì)話(huà)框讓用戶(hù)確定是否刪除。因此我們經(jīng)常會(huì)用鏈接<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代碼會(huì)跳轉(zhuǎn)到"執(zhí)行刪除.jsp"頁(yè)面，而<a>標(biāo)簽也會(huì)跳轉(zhuǎn)打開(kāi)一個(gè)空頁(yè)面。因?yàn)閔tml本身對(duì) <a>標(biāo)簽的href屬性做了處理，所以就會(huì)先執(zhí)行我們自己定義的方法，接著再運(yùn)行它自身的方法（跳轉(zhuǎn)的方法）。
解決方法主要有四種，如下：
1. 不用a標(biāo)簽,設(shè)定css或用js來(lái)表現(xiàn)（有點(diǎn)復(fù)雜）；
2. 用a標(biāo)簽,onclick屬性或onclick事件中返回false；(個(gè)人喜歡)
如：<a href="" target="mainFrame" class="STYLE4" onclick="del();return false" >刪除</a>
這是個(gè)執(zhí)行順序的問(wèn)題，<a>這個(gè)標(biāo)簽的執(zhí)行順序應(yīng)該是先執(zhí)行onclick 的腳本，最后才進(jìn)行href參數(shù)指定頁(yè)面的跳轉(zhuǎn)。在onclick中返回false，就可以中止<a>標(biāo)簽的工作流程，也就是不讓頁(yè)面跳轉(zhuǎn)到href參數(shù)指定的頁(yè)面。
3. 用href="javascript:void(0)"這種偽協(xié)議；（這種偽協(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)前頁(yè)面頂部，當(dāng)頁(yè)面內(nèi)容較多時(shí)，還是會(huì)有跳轉(zhuǎn)的感覺(jué)）
相關(guān)文章
js實(shí)現(xiàn)圖片粘貼上傳到服務(wù)器并展示的實(shí)例
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)圖片粘貼上傳到服務(wù)器并展示的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
這篇文章主要介紹了js如何實(shí)現(xiàn)input的賦值問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
在本篇文章里小編給大家分享了關(guān)于js取小數(shù)點(diǎn)后兩位四種方法和實(shí)例代碼，需要的朋友們學(xué)習(xí)下。2019-01-01
js添加千分位的實(shí)現(xiàn)代碼(超簡(jiǎn)單)
下面小編就為大家?guī)?lái)一篇js添加千分位的實(shí)現(xiàn)代碼(超簡(jiǎn)單)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
JS實(shí)現(xiàn)刷新父頁(yè)面不彈出提示框的方法
這篇文章主要介紹了JS實(shí)現(xiàn)刷新父頁(yè)面不彈出提示框的方法,實(shí)例分析了javascript子窗口的打開(kāi)以及子窗口與父窗口的交互操作技巧,需要的朋友可以參考下2016-06-06
三劍客：offset、client和scroll還傻傻分不清？
這篇文章主要給大家介紹了三劍客：offset，client和scroll的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
JavaScript中isPrototypeOf函數(shù)作用和使用實(shí)例
這篇文章主要介紹了JavaScript中isPrototypeOf函數(shù)作用和使用實(shí)例,本文講解了它的作用和使用方法以及使用實(shí)例,需要的朋友可以參考下2015-06-06
微信小程序scroll-view實(shí)現(xiàn)左右聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view實(shí)現(xiàn)左右聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
微信小程序tabBar組件切換與下拉刷新實(shí)現(xiàn)詳解
tabBar相對(duì)而言用的還是比較多的,但是用起來(lái)并沒(méi)有難,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局配置之tabBar的相關(guān)資料,文中通過(guò)圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
首先我們要知道，js這門(mén)語(yǔ)言是單線(xiàn)程的，同時(shí)只能做一件事，比如說(shuō)渲染dom，執(zhí)行js方法，這些事情只能一個(gè)一個(gè)做，不能分開(kāi)執(zhí)行。（因?yàn)閖s需要操作dom，當(dāng)兩個(gè)js方法同時(shí)操作一個(gè)dom的時(shí)候就會(huì)出問(wèn)題，所以js被設(shè)計(jì)成了單線(xiàn)程）。本文將介紹JS三座大山之異步和單線(xiàn)程。2021-06-06