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