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 相关文章推荐
jQuery:节点(插入,复制,替换,删除)操作
Mar 04 Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
详细分析JavaScript变量类型
Jul 08 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
微信小程序 新建登录页并实现tabBar隐藏
Jun 13 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 Javascript
layui实现动态和静态分页
Apr 28 Javascript
Vue入门之数量加减运算操作示例
Dec 11 Javascript
微信小程序自定义波浪组件使用方法详解
Sep 21 Javascript
原生javascript如何实现共享onload事件
Jul 03 Javascript
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
php下保存远程图片到本地的办法
2010/08/08 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
浅谈Javascript面向对象编程
2011/11/15 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
浅谈jquery.fn.extend与jquery.extend区别
2015/07/13 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
多种jQuery绑定事件的实现方式
2016/06/13 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
对Angular中单向数据流的深入理解
2018/03/31 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
python解析xml模块封装代码
2014/02/07 Python
如何利用Fabric自动化你的任务
2016/10/20 Python
Python图像处理之颜色的定义与使用分析
2019/01/03 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
LookFantastic丹麦:英国美容护肤精品在线商城
2016/08/18 全球购物
美国知名生活购物网站:Goop
2017/11/03 全球购物
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
行政助理岗位职责
2013/11/10 职场文书
采购员工作总结范文
2015/08/12 职场文书
组织委员竞选稿
2015/11/21 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL