A标签触发onclick事件而不跳转的多种解决方法_a标签不跳转执行方法 - CSDN文库

166 浏览量更新于2023-03-16 评论收藏 43KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

A标签触发标签触发onclick事件而不跳转的多种解决方法事件而不跳转的多种解决方法

一个标签仅仅是要触发onclick行为，遇到了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;

}

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>。（总是跳转到当前页面顶部，当页面内容较多时，还是会有跳转

的感觉）

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

评论0

weixin_38656064

粉丝: 10
资源: 933

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈