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 相关文章推荐
ExtJS扩展 垂直tabLayout实现代码
Jun 21 Javascript
CCPry JS类库 代码
Oct 30 Javascript
js操纵dom生成下拉列表框的方法
Feb 24 Javascript
2014年50个程序员最适用的免费JQuery插件
Dec 15 Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 Javascript
实例讲解JavaScript中的this指向错误解决方法
Jun 13 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
Vue.js 60分钟快速入门教程
Mar 28 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
浅谈Koa服务限流方法实践
Oct 23 Javascript
详解npm 配置项registry修改为淘宝镜像
Sep 07 Javascript
一次微信小程序内地图的使用实战记录
Sep 09 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
Joomla下利用configuration.php存储简单数据
2010/05/19 PHP
PHP重定向的3种方式
2013/03/07 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
PHP设计模式(五)适配器模式Adapter实例详解【结构型】
2020/05/02 PHP
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
js文字横向滚动特效
2015/11/11 Javascript
javascript每日必学之多态
2016/02/23 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
Python通过正则表达式选取callback的方法
2015/07/18 Python
详细介绍Python的鸭子类型
2016/09/12 Python
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
Python箱型图处理离群点的例子
2019/12/09 Python
超级实用的8个Python列表技巧
2020/08/24 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
html5构建触屏网站之touch事件介绍
2013/01/07 HTML / CSS
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
校园安全检查制度
2014/02/03 职场文书
运动会通讯稿500字
2014/02/20 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
2014年环保工作总结
2014/11/26 职场文书
个人工作年终总结
2015/03/09 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
Redis基本数据类型List常用操作命令
2022/06/01 Redis