點擊連接觸發onclick事件而不跳轉

在web頁面開發時，咱們常常會遇到下列狀況：

1.一個標籤僅僅是要觸發onclick行爲；

2.表現上要有鼠標的pointer指針顯示,或者其餘相似a標籤的視覺效果。

好比執行刪除操做時，爲了不誤操做，咱們要彈出對話框讓用戶肯定是否刪除。所以咱們常常會用連接<a></a>形式代替<button> 觸發onclick事件。

代碼以下：

<script type="text/javascript">
function del(){
if(confirm("肯定刪除該記錄？")){
parent.window.location="執行刪除.jsp";
return true;
}
return false;
}
</script>

<a href="" target="mainFrame" class="STYLE4" onclick="del()" >刪除</a>

這樣作的後果是js代碼會跳轉到"執行刪除.jsp"頁面，而<a>標籤也會跳轉打開一個空頁面。由於html自己對 <a>標籤的href屬性作了處理，因此就會先執行咱們本身定義的方法，接着再運行它自身的方法（跳轉的方法）。

解決方法主要有四種，以下：

1. 不用a標籤,設定css或用js來表現（有點複雜）；

2. 用a標籤,onclick屬性或onclick事件中返回false；(我的喜歡)

如：<a href="" target="mainFrame" class="STYLE4" onclick="del();return false" >刪除</a>

這是個執行順序的問題，<a>這個標籤的執行順序應該是先執行onclick 的腳本，最後才進行href參數指定頁面的跳轉。在onclick中返回false，就能夠停止<a>標籤的工做流程，也就是不讓頁面跳轉到href參數指定的頁面。

3. 用href="javascript:void(0)"這種僞協議；（這種僞協議，少寫的好）
即：<a href="javascript:void(0)" target="mainFrame" class="STYLE4" onclick="del()" >刪除</a>

4. <a href="#" class="STYLE4" onclick="del()" >刪除</a>。（老是跳轉到當前頁面頂部，當頁面內容較多時，仍是會有跳轉的感受）

附上一段我用jquery切換三個DIV，用了連接且不跳轉的代碼：

<script language="JavaScript" src="/images/js/jquery.min.js"></script>

<div class="left zksl01"> <h3><a href="" id="czmb" onmouseover="czmbdj()" onclick="return false">祛除面部皺紋</a><a href="" id="mbtc" onmouseover="mbtcdj()" onclick="return false">面部填充</a><a href="/" style="cursor:hand" id="ksl" onmouseover="ksldj()">抗衰老</a></h3> <div id="czmbdiv" > <div class="zksl011"> <div class="left zksl01l"><a href="#"><img src="/templates/default/special/zhuan01/images/z_ksl_img12.jpg" /></a></div> <div class="left zksl01r"> <h4><a href="#">111明星薈萃，美動中國-石家莊美聯臣耀世啓幕</a></h4> <p>11月7日河北省首家「中國明星美麗管理機構」——美聯臣（石家莊）醫療美容醫院耀世啓幕大典華麗上演。啓幕大典以「明星薈萃，美動中國」爲主題，吸引了蕭薔、葉一茜、吉米等多位中國當紅娛樂明...<a href="#">[詳情]</a> </p> <ul> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> </ul> </div> </div> <div class="zksl012"> <ul> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> </ul> </div> </div> <div id="mbtcdiv" style="display:none"> <div class="zksl011"> <div class="left zksl01l"><a href="#"><img src="/templates/default/special/zhuan01/images/z_ksl_img12.jpg" /></a></div> <div class="left zksl01r"> <h4><a href="#">222明星薈萃，美動中國-石家莊美聯臣耀世啓幕</a></h4> <p>11月7日河北省首家「中國明星美麗管理機構」——美聯臣（石家莊）醫療美容醫院耀世啓幕大典華麗上演。啓幕大典以「明星薈萃，美動中國」爲主題，吸引了蕭薔、葉一茜、吉米等多位中國當紅娛樂明...<a href="#">[詳情]</a> </p> <ul> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> </ul> </div> </div> <div class="zksl012"> <ul> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> </ul> </div> </div> <div id="ksldiv" style="display:none"> <div class="zksl011"> <div class="left zksl01l"><a href="#"><img src="/templates/default/special/zhuan01/images/z_ksl_img12.jpg" /></a></div> <div class="left zksl01r"> <h4><a href="#">333明星薈萃，美動中國-石家莊美聯臣耀世啓幕</a></h4> <p>11月7日河北省首家「中國明星美麗管理機構」——美聯臣（石家莊）醫療美容醫院耀世啓幕大典華麗上演。啓幕大典以「明星薈萃，美動中國」爲主題，吸引了蕭薔、葉一茜、吉米等多位中國當紅娛樂明...<a href="#">[詳情]</a> </p> <ul> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> </ul> </div> </div> <div class="zksl012"> <ul> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> <li><a href="#">激光去體毛，五洲整形美容技術</a></li> </ul> </div> </div> </div> <script language="javascript" type="text/javascript"> function czmbdj() { $("#czmbdiv").show(); $("#mbtcdiv").hide(); $("#ksldiv").hide(); } function mbtcdj() { $("#czmbdiv").hide(); $("#mbtcdiv").show(); $("#ksldiv").hide(); } function ksldj() { $("#czmbdiv").hide(); $("#mbtcdiv").hide(); $("#ksldiv").show(); } </script>