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

所属分类: 网络编程 / JavaScript 阅读数: 279
收藏 0 赞 0 分享
在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>。(总是跳转到当前页面顶部,当页面内容较多时,还是会有跳转的感觉)
更多精彩内容其他人还在看

JavaScript this关键字指向常用情况解析

这篇文章主要介绍了JavaScript this关键字指向常用情况解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue-cli打包后如何本地查看的操作

这篇文章主要介绍了Vue-cli打包后如何本地查看的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue cli 3.0通用打包配置代码,不分一二级目录

这篇文章主要介绍了vue cli 3.0通用打包配置代码,不分一二级目录,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JavaScript事件循环及宏任务微任务原理解析

这篇文章主要介绍了JavaScript事件循环及宏任务微任务原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

关于vue-cli3打包代码后白屏的解决方案

这篇文章主要介绍了关于vue-cli3打包代码后白屏的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue打包静态资源后显示空白及static文件路径报错的解决

这篇文章主要介绍了vue打包静态资源后显示空白及static文件路径报错的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue-cli3访问public文件夹静态资源报错的解决方式

这篇文章主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS继承实现方法及优缺点详解

这篇文章主要介绍了JS继承实现方法及优缺点详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

vue或react项目生产环境去掉console.log的操作

这篇文章主要介绍了vue或react项目生产环境去掉console.log的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题

这篇文章主要介绍了解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多