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 相关文章推荐
javascript arguments使用示例
Dec 16 Javascript
jQuery中:only-child选择器用法实例
Jan 03 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
May 03 Javascript
荐书|您有一份JavaScript书单待签收
Jul 21 Javascript
VueJs 将接口用webpack代理到本地的方法
Nov 27 Javascript
vue刷新和tab切换实例
Feb 11 Javascript
解决vue中对象属性改变视图不更新的问题
Feb 23 Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 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
咖啡与水的关系
2021/03/03 冲泡冲煮
php session实现多级目录存放实现代码
2016/02/03 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
网页javascript精华代码集
2007/01/24 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
vue键盘事件点击事件加native操作
2020/07/27 Javascript
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
Pyhton中防止SQL注入的方法
2015/02/05 Python
Python如何获取系统iops示例代码
2016/09/06 Python
Python连接phoenix的方法示例
2017/09/29 Python
django创建超级用户过程解析
2019/09/18 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
解决Jupyter Notebook开始菜单栏Anaconda下消失的问题
2020/04/13 Python
Pygame的程序开始示例代码
2020/05/07 Python
Python自动化操作实现图例绘制
2020/07/09 Python
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
毕业自荐书
2013/12/09 职场文书
国际贸易专业个人职业生涯规划
2014/02/15 职场文书
商场消防安全责任书
2014/07/29 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
培养联系人考察意见
2015/06/01 职场文书
初中同学会致辞
2015/08/01 职场文书
承诺书应该怎么写?
2019/09/10 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript
Python turtle实现贪吃蛇游戏
2021/06/18 Python