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


Posted in Javascript onJune 27, 2013

在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 相关文章推荐
JavaScript脚本性能优化注意事项
Nov 18 Javascript
jquery里的正则表达式说明
Aug 03 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
JS实现禁止鼠标右键的功能
Oct 15 Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 Javascript
vue init失败简单解决方法(终极版)
Dec 22 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
Sep 25 Javascript
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
vue-cli3中vue.config.js配置教程详解
May 29 Javascript
p5.js实现动态图形临摹
Oct 23 Javascript
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
artdialog的图片/标题以及关闭按钮不显示的解决方法
Jun 27 #Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 #Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
Jun 26 #Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 #Javascript
如何让页面加载完成后执行js
Jun 26 #Javascript
文件编码导致jquery失效的解决方法
Jun 26 #Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 #Javascript
You might like
MySql中正则表达式的使用方法描述
2008/07/30 PHP
php采集时被封ip的解决方法
2010/08/29 PHP
详谈PHP编码转换问题
2015/07/28 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
删除select中所有option选项jquery代码
2013/08/12 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
2016/01/23 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
element中的$confirm的使用
2020/04/26 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
Python发送http请求解析返回json的实例
2018/03/26 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
任命书范本大全
2014/06/06 职场文书
KTV员工管理制度
2015/08/06 职场文书
小学体育教学随笔
2015/08/14 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL