a标签触发onclick事件而不跳转
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了a标签触发onclick事件而不跳转，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1695字，纯文字阅读大概需要3分钟。
内容图文
在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" onclick="del()" >删除</a>这样做的后果是js代码会跳转到"执行删除.jsp"页面，而<a>标签也会跳转打开一个空页面。因为html本身对 <a>标签的href属性做了处理，所以就会先执行我们自己定义的方法，接着再运行它自身的方法（跳转的方法）。
解决方法主要有四种，如下：
1. 不用a标签,设定css或用js来表现（有点复杂）；
2. 用a标签,onclick属性或onclick事件中返回false；(个人喜欢)
如：<a href="" target="mainFrame" onclick="del();return false" >删除</a>
这是个执行顺序的问题，<a>这个标签的执行顺序应该是先执行onclick 的脚本，最后才进行href参数指定页面的跳转。在onclick中返回false，就可以中止<a>标签的工作流程，也就是不让页面跳转到href参数指定的页面。
3. 用href="javascript:void(0)"这种伪协议；（这种伪协议，少写的好）
即：<a href="javascript:void(0)" target="mainFrame" onclick="del()" >删除</a>
4. <a href="#" onclick="del()" >删除</a>。（总是跳转到当前页面顶部，当页面内容较多时，还是会有跳转的感觉）
其他知识：
下面的代码创建了一个超级链接，用户单时会提交表单。 <A HREF="javascript:void(document.forms[0].submit())">单此处提交表单</A>
a标签中href ="#"中的#是锚点的意思 也可以认为是当前页面
下面是锚的使用方法：
<!-- 定义一个锚。 --> <a name="anchor">锚点</a> <!-- 本页面的一个连接,连接到锚: --> <a href="#anchor">锚</a>
效果是：点击锚就转到了锚点段落。
内容总结
以上是互联网集市为您收集整理的a标签触发onclick事件而不跳转全部内容，希望文章能够帮你解决a标签触发onclick事件而不跳转所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。