给html超链接设置事件不使用href来完成跳


Posted in Javascript onApril 20, 2014

有的时候,我们需要使用<a>这个超级链接,而又不使用href来完成跳转,而是如:<a href="#" onClick="fun()"></a>这种方式。这样,就不会让页面跳转。但是同时也会带来一些负面的问题,比如页面的title变成了“#”,或者页面出现了滚动条什么的。这是因为在执行完了onClick事件后,<a>又去跳转href所指向的地址了,而”#“是个锚点,默认是网页的页首,所以会带来上边所说的问题。

解决方法有以下两种:

1、onClick事件添加return false语句,例如:

<a href="#" onClick="fun(); return false;">点击</a>

2、用void(0)的方式代替#,例如:
<a href="javascript:void(0)" onclick="fun()">点击</a>
Javascript 相关文章推荐
把jquery 的dialog和ztree结合实现步骤
Aug 02 Javascript
JQuery实现带排序功能的权限选择实例
May 18 Javascript
JavaScript中解析JSON数据的三种方法
Jul 03 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
Javascript将JSON日期格式化
Aug 23 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
Vue 2.X的状态管理vuex记录详解
Mar 23 Javascript
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 Javascript
这样回答继承可能面试官更满意
Dec 10 Javascript
jQuery响应enter键的实现思路
Apr 18 #Javascript
jquery easyui 结合jsp简单展现table数据示例
Apr 18 #Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 #Javascript
用jquery仿做发微博功能示例
Apr 18 #Javascript
实例说明为什么不要行内使用javascript
Apr 18 #Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 #Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 #Javascript
You might like
新浪SAE搭建PHP项目教程
2015/01/28 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
Laravel框架实现的上传图片到七牛功能详解
2019/09/06 PHP
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
javascript控制台详解
2015/06/25 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
Python写的一个简单DNS服务器实例
2014/06/04 Python
全面解读Python Web开发框架Django
2014/06/30 Python
浅谈Python中的数据类型
2015/05/05 Python
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
什么是数据抽象
2016/11/26 面试题
电子专业毕业生自我鉴定
2014/01/22 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
劳模事迹材料范文
2014/12/24 职场文书
庆七一晚会主持词
2015/06/30 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书
Java8中接口的新特性使用指南
2021/11/01 Java/Android