javascript:void(0)使用探讨


Posted in Javascript onAugust 27, 2013

在做页面时,如果想做一个链接点击后不做任何事情,或者响应点击而完成其他事情,可以设置其属性 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 相关文章推荐
IE、FF、Chrome浏览器中的JS差异介绍
Aug 13 Javascript
jquery使用jxl插件导出excel示例
Apr 14 Javascript
jQuery实现的多选框多级联动插件
May 02 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
Javascript动画效果(2)
Oct 11 Javascript
BootStrap轻松实现微信页面开发代码分享
Oct 21 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
Dec 08 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
react-router JS 控制路由跳转实例
Jun 15 Javascript
详解@angular/cli 改变默认启动端口两种方式
Nov 29 Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 Javascript
顶部缓冲下拉菜单导航特效的JS代码
Aug 27 #Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 #Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 #Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 #Javascript
Javascript 浮点运算的问题分析与解决方法
Aug 27 #Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
Aug 26 #Javascript
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 #Javascript
You might like
PHP n个不重复的随机数生成代码
2009/06/23 PHP
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
php实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
php英文单词统计器
2016/06/23 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
半角全角相互转换的js函数
2009/10/16 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
bootstrap组件之按钮式下拉菜单小结
2017/01/19 Javascript
JavaScript学习笔记之惰性函数示例详解
2017/08/27 Javascript
JavaScript实现的简单加密解密操作示例
2018/06/01 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
Python yield使用方法示例
2013/12/04 Python
python中将字典转换成其json字符串
2014/07/16 Python
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
Python实现优先级队列结构的方法详解
2016/06/02 Python
利用Python查看目录中的文件示例详解
2017/08/28 Python
python与字符编码问题
2019/05/24 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
opencv实现简单人脸识别
2021/02/19 Python
如何获取Python简单for循环索引
2019/11/21 Python
.dcm格式文件软件读取及python处理详解
2020/01/16 Python
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
应届大学毕业生找工作的求职信范文
2013/11/29 职场文书
婚礼证婚人证婚词
2014/01/08 职场文书
母亲节感恩活动记录
2014/03/16 职场文书
搞笑征婚广告词
2014/03/17 职场文书
高中班级口号
2014/06/09 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
python 安全地删除列表元素的方法
2022/03/16 Python
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android