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 相关文章推荐
基于jquery的放大镜效果
May 30 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 Javascript
jquery+ajax验证不通过也提交表单问题处理
Dec 12 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
Jun 08 Javascript
RequireJs的使用详解
Feb 19 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 Javascript
原生javascript AJAX 三级联动的实现代码
May 04 Javascript
详解vue项目中使用token的身份验证的简单实践
Mar 08 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 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
Terran魔法科技
2020/03/14 星际争霸
php目录遍历函数opendir用法实例
2014/11/20 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
js自定义方法通过隐藏iframe实现文件下载
2013/02/21 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
jquery实现表单验证并阻止非法提交
2015/07/09 Javascript
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
React Native实现简单的登录功能(推荐)
2016/09/19 Javascript
js返回顶部实例分享
2016/12/21 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
python 使用get_argument获取url query参数
2017/04/28 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
汉语言文学毕业生求职信
2013/10/01 职场文书
实习自我鉴定范文
2013/10/30 职场文书
机电一体化专业推荐信
2013/12/03 职场文书
《可爱的动物》教学反思
2014/02/22 职场文书
大学生求职信例文
2014/06/29 职场文书
教师远程研修感悟
2015/11/18 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
七年级作文之冬景
2019/11/07 职场文书
Redis实现订单过期删除的方法步骤
2022/06/05 Redis