点击连接触发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>