A標(biāo)簽觸發(fā)onclick事件而不跳轉(zhuǎn)的多種解決方法

2019-11-20 22:36:24

字體：大中小

供稿：網(wǎng)友

在web頁面開發(fā)時(shí)，我們經(jīng)常會(huì)遇到下列情況：

1.一個(gè)標(biāo)簽僅僅是要觸發(fā)onclick行為；
2.表現(xiàn)上要有鼠標(biāo)的pointer指針顯示,或者其他類似a標(biāo)簽的視覺效果。
比如執(zhí)行刪除操作時(shí)，為了避免誤操作，我們要彈出對(duì)話框讓用戶確定是否刪除。因此我們經(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"頁面，而<a>標(biāo)簽也會(huì)跳轉(zhuǎn)打開一個(gè)空頁面。因?yàn)閔tml本身對(duì) <a>標(biāo)簽的href屬性做了處理，所以就會(huì)先執(zhí)行我們自己定義的方法，接著再運(yùn)行它自身的方法（跳轉(zhuǎn)的方法）。

解決方法主要有四種，如下：
1. 不用a標(biāo)簽,設(shè)定css或用js來表現(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í)行順序的問題，<a>這個(gè)標(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í)，還是會(huì)有跳轉(zhuǎn)的感覺）

上一篇：JQUERY實(shí)現(xiàn)左側(cè)TIPS滑進(jìn)滑出效果示例

下一篇：artdialog的圖片/標(biāo)題以及關(guān)閉按鈕不顯示的解決方法