让A标签执行onclick事件而不跳转
2012-06-01 13:13 2346 0
摘要 在web页面开发时，我们经常会遇到下列情况： 1.一个标签仅仅是要触发onclick行为； 2.表现上要有鼠标的pointer指针显示,或者其他类似a标签的视觉效果。 比如执行删除操作时，为了避免误操作，我们要弹出对话框让用户确定是否删除。因此我们经常会用链接a/a形
在web页面开发时，我们经常会遇到下列情况：
1.一个标签仅仅是要触发onclick行为；
2.表现上要有鼠标的pointer指针显示,或者其他类似a标签的视觉效果。
比如执行删除操作时，为了避免误操作，我们要弹出对话框让用户确定是否删除。因此我们经常会用链接形式代替 触发onclick事件。
代码如下：
<a href="" target="mainFrame" class="STYLE4" onclick="del()" >删除
这样做的后果是js代码会跳转到"执行删除.jsp"页面，而标签也会跳转打开一个空页面。因为html本身对 标签的href属性做了处理，所以就会先执行我们自己定义的方法，接着再运行它自身的方法（跳转的方法）。
解决方法主要有四种，如下：
1. 不用a标签,设定css或用js来表现（有点复杂）；
2. 用a标签,onclick属性或onclick事件中返回false；(个人喜欢)
如：<a href="" target="mainFrame" class="STYLE4" onclick="del();return false" >删除
这是个执行顺序的问题，这个标签的执行顺序应该是先执行onclick 的脚本，最后才进行href参数指定页面的跳转。在onclick中返回false，就可以中止标签的工作流程，也就是不让页面跳转到href参数指定的页面。
4. <a href="#" class="STYLE4" onclick="del()" >删除。（总是跳转到当前页面顶部，当页面内容较多时，还是会有跳转的感觉）
