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 AnythingSlider滑动效果插件
Feb 07 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
May 14 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
js中不同的height, top的区别对比
Sep 24 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 Javascript
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
Jan 25 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输出1000以内质数(素数)示例
2014/02/16 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
Javascript 布尔型分析
2008/12/22 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
JavaScript常用工具函数汇总(浏览器环境)
2020/09/17 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
Python字典操作简明总结
2015/04/13 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
2014年团总支工作总结
2014/11/21 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
办公室卫生管理制度
2015/08/04 职场文书
优质服务心得体会(共4篇)
2016/01/22 职场文书