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 相关文章推荐
脚本之家贴图转换+转贴工具用到的js代码超级推荐
Apr 05 Javascript
在多个页面使用同一个HTML片段《续》
Mar 04 Javascript
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 Javascript
jQuery.fn和jQuery.prototype区别介绍
Oct 05 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
微信小程序实现签到功能
Oct 31 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
顶部缓冲下拉菜单导航特效的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
PHP5 安装方法
2006/10/09 PHP
写一个用户在线显示的程序
2006/10/09 PHP
有关 PHP 和 MySQL 时区的一点总结
2008/03/26 PHP
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
js 金额文本框实现代码
2012/02/14 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
JS功能代码集锦
2016/05/04 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
python设置检查点简单实现代码
2014/07/01 Python
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
深入浅析Python中的yield关键字
2018/01/24 Python
python numpy元素的区间查找方法
2018/11/14 Python
python实现字符串加密成纯数字
2019/03/19 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
贺卡寄语大全
2014/04/11 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
宣传普通话标语
2014/06/27 职场文书