javascript:void(0)的问题使用探讨


Posted in Javascript onApril 10, 2014

在做页面时,如果想做一个链接点击后不做任何事情,或者响应点击而完成其他事情,可以设置其属性 href = "#",但是,这样会有一个问题,就是当页面有滚动条时,点击后会返回到页面顶端,用户体验不好。

目前有如下几种解决办法:
1)点击链接后不做任何事情

<a href="javascript:void(0);" >test</a> 
<a href="javascript:;" >test</a> 
<a href="####" >test</a> //使用2个到4个#,见的大多是"####",也有使用"#all"等其他的

2)点击链接后,响应用户自定义的点击事件
<a href="javascript:void(0)" onclick="doSomething()">test</a> 
<a href="#" onclick="doSomething();return false;">什么问题都解决了,包括浏览器不兼容问题</a> //或者直接使用href="" 
<a href="#" onclick="alert();event.returnValue=false;">test</a>

说明:
1.javascript:void(0)这种伪协议,少写的好,如果你看过一些web标准的书就知道为什么了。(不懂,原话摘的,暂做记录)
2.链接(href)直接使用javascript:void(0)在IE中可能会引起一些问题,比如:造成gif动画停止播放等,所以,最安全的办法还是使用“####”。为防止点击链接后跳转到页首,onclick事件return false即可。
3.如果仅仅是想鼠标移过,变成手形,可以使用
<span style="cursor:pointer" onclick="foo()">Click Me!</span>

void是javascript的操作符,意思是:只执行表达式,但没有返回值,
void 操作符用法格式如下:
javascript:void (expression) 
javascript:void expression

为了程序风格良好,建议使用第二种带上括号的
我们可以使用void操作符指定超级链接,如javascript:void(document.form.submit())。表达式会被计算但是不会在当前文档处装入任何内容,void(0)计算为0,但在JavaScript上没有任何效果,也就是说 <a href="javascript:void(0)">的效果同<a href="javascript:void(1)">的效果是一样的。
关键是只要知道void是javascipt自身的操作符,它表示的是只执行表达式,但没有返回值!

另外页面会自动调回顶端,是因为"#"默认的瞄点位置是top,所以会出现这种情况。

Javascript 相关文章推荐
如何判断图片地址是否失效
Feb 02 Javascript
JQUERY CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
Javascript中的var_dump函数实现代码
Sep 07 Javascript
js 函数调用模式小结
Dec 26 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 Javascript
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
基于jquery实现发送文章到手机的代码
Dec 26 Javascript
js获取json元素数量的方法
Jan 27 Javascript
jQuery子属性过滤选择器用法分析
Feb 10 Javascript
JavaScript排序算法动画演示效果的实现方法
Oct 18 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
Sep 29 Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 #Javascript
php的文件上传入门教程(实例讲解)
Apr 10 #Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 #Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 #Javascript
常见的原始JS选择器使用方法总结
Apr 09 #Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 #Javascript
js控制iframe的高度/宽度让其自适应内容
Apr 09 #Javascript
You might like
php正则校验用户名介绍
2008/07/19 PHP
用PHP+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
php cookie使用方法学习笔记分享
2013/11/07 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
JS根据年月获得当月天数的实现代码
2014/07/03 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
2017/09/01 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
ES6 Object方法扩展的应用实例分析
2019/06/25 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
JavaScript的垃圾回收机制与内存管理
2020/08/06 Javascript
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
Django 重写用户模型的实现
2019/07/29 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
经济学人订阅:The Economist
2018/07/19 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
.net C#面试题
2012/08/28 面试题
办公文员的工作岗位职责
2013/11/12 职场文书
自我评价的写作规则
2014/01/06 职场文书
物业保安员岗位职责制度
2014/01/30 职场文书
2014年五一促销活动方案
2014/03/09 职场文书
工作所在部门证明
2014/09/21 职场文书
项目建议书
2015/02/04 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
中学推普周活动总结
2015/05/07 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书