A标签触发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;
}
html href属性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>。（总是跳转到当前页⾯顶部，当页⾯内容较多时，还是会有跳转的感觉）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。